// Scss Document
/*--------------------
共通設定
----------------------*/
$base-color:#fff;
$bg-color:#f5f5f5;
$eng:'Cinzel', serif;
$font-size:16px;
$small:75%;
$ja: kozuka-mincho-pr6n, serif;
$color:#444444;
$spring:#ded799;
$summer:#8da3c4;
$autumn:#d4987e;
$winter:#8f85af;

$breakpoint-tablet: 1024px; 
$breakpoint-mobile: 640px;
@mixin max-screen($break-point) { 
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) { 
  @media screen and (min-width: $break-point) {
    @content;
  }
}
@mixin screen($break-point-min, $break-point-max) { 
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 1px;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	line-height: 1.0;
	color: #666666;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
}
ul,ol,li {
	list-style: none;
}
.pc {
  display: block;
  @include max-screen($breakpoint-mobile) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-mobile) {
    display: block;
  }
}
.InnerContents {
    margin: 0 auto;
	@include max-screen($breakpoint-mobile) {
		margin-top: 70px;
	}
}
.lp_wrapper {
	background: $bg-color;
	text-align: center;
	padding: 5% 0 0;
	& .hide {
		display: none;
	}
	& h2 {
		font-family: $ja;
		font-size: 3.0em;
		letter-spacing: .2em;
		margin-top: 10%;
		@include max-screen($breakpoint-mobile) {
			font-size: 1.2em;
			margin-top: 10%;
		}
	}
	& p {
		font-size: 1.0em;
		line-height: 2.0;
		margin: 5% auto;
		@include max-screen($breakpoint-mobile) {
			font-size: 0.7em;
		}
	}
	& img {
		max-width: 180px;
		margin:0 auto 10%;
		@include max-screen($breakpoint-mobile) {
			max-width: 100px;
		}
	}
	& h3 {
		font-size: 6.0em;
		font-family: $eng;
		color: #fff;
		line-height: 0.6;
		@include max-screen($breakpoint-mobile) {
			font-size: 2.0em;
		}
	}
    & .choose_box {
		width: 100%;
		background: #fff;
		& div {
			padding: 5% 0 0;
			@include max-screen($breakpoint-tablet) {
				padding-top: 13%;
			}
			& h3 {
				color: #666666;
				font-family: $eng;
				font-size: 4.0em;
				line-height: 1.2;
				margin: 5% auto 3%;
				border-bottom: 1px solid #666;
				display: inline-block;
				position:relative;
				@include max-screen($breakpoint-mobile) {
					font-size: 2.0em;
					margin-top: 10%;
				}
				&::before {
					content: "QUESTION";
					font-size: 37%;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -40px;
					@include max-screen($breakpoint-mobile) {
						top: -20px;
					}
				}
			}
			& h4 {
				font-size: 1.1em;
				font-weight: 400;
				margin: 0 auto;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.8em;
					margin: 5% auto 10%;
				}
			}
			& ul {
				width: 100%;
				max-width: 750px;
				margin: 3% auto 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				@include max-screen($breakpoint-mobile) {
					margin-top: 5%;
				}
				& li {
					width: 48%;
					border: 1px solid #666666;
					margin: 1%;
					border-radius: 30px;
					@include max-screen($breakpoint-mobile) {
						width: 90%;
						margin: 1% auto;
						border-radius: 50vh;
					}
					& a {
						width: 100%;
						padding: 5%;
						display: block;
						cursor: pointer;
						@include max-screen($breakpoint-mobile) {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							padding: 2% 7%;
						}
						& div {
							padding: 0;
							font-size: 0.8em;
							&:nth-child(2) {
								@include max-screen($breakpoint-mobile) {
									margin-left: 5%;
								}
							}
						}
						& img {
							max-width: 150px;
							vertical-align: bottom;
							margin: 0;
							@include max-screen($breakpoint-mobile) {
								max-width: 60px;
							}
						}
						& p {
							@include max-screen($breakpoint-mobile) {
							text-align: left;}
						}
					}
				}
			}
			
		}
	}
}
.result_box {
	padding-top: 10%;
	width: 100%;
	background: #fff;
	text-align: left;
	& .result {
		max-width: 1000px;
		margin: 0 auto;
	}
	&.smoothText {
		overflow: hidden;
		display: block;
	}
	& .smoothTextTrigger{
		transition: 1.0s ease-in-out;
		transform: translate3d(0,100%,0) skewY(12deg);
		transform-origin: left;
		display: block;
	}
	& .smoothTextTrigger.smoothTextAppear{
		transform: translate3d(0,0,0) skewY(0);
	}
	& .anime-ttl_box {
		margin-left: 5%;
		padding: 0;
		text-align: left;
		& h3 {
			line-height: 1.0;
			& span {
				font-family: $eng;
				font-size: 1.0em;
				letter-spacing: .1em;
				@include max-screen($breakpoint-mobile) {
					font-size: 1.0em;
				}
			}
		}
	}
	& h4 {
		font-size: 1.2em;
		color: #444444;
		font-family: $ja;
		@include max-screen($breakpoint-mobile) {
			font-size: 0.8em;
		}
	}
	& .box {
		display: flex;
		width: 90%;
		margin: 5% auto;
		justify-content: center;
		align-items: flex-start;
		& div {
			width: 50%;
			@include max-screen($breakpoint-mobile) {
				padding: 0;
			}
			&:nth-child(1) {
				padding-right: 5%;
				@include max-screen($breakpoint-mobile) {
					padding-right: 2%;
				}
			}
			& p {
				margin: 10% auto;
				font-size: 0.9em;
				line-height: 2.2;
				@include max-screen($breakpoint-mobile) {
					margin: 5% auto;
					font-size: 0.6em;
				}
			}
			& h4 {
				& span {
				margin-top: 25%;
				color: #c1b9b6;
				font-family: $eng;
				font-size: 2.2em;
				letter-spacing: .1em;
				@include max-screen($breakpoint-mobile) {
					font-size: 1.1em;
				}}
			}
			& .border span {
				border-bottom: 4px solid #d7d7d7;
				font-size: 1.0em;
				@include max-screen($breakpoint-mobile) {
					border-bottom-width: 2px;
				}
			}
			& img {
				max-width: 450px;
			}
		}
	}& .yourType {
		width: 70%;
		margin: 5% auto 10%;
		@include max-screen($breakpoint-mobile) {
			width: 85%;
		}
		& h2 {
			font-size: 1.1em;
			color: #565656;
			font-family: $ja;
			margin-bottom: 3%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			@include max-screen($breakpoint-mobile) {
				font-size: .8em;
			}
			&::before, &::after {
				content: '';
				width: 1px;
				height: 40px;
				background-color: #565656;
				@include max-screen($breakpoint-mobile) {
					height: 25px;
				}
			}
			&::before {
				margin-right: 20px;
				transform: rotate(-30deg)
			}
			&::after {
				margin-left: 20px;
				transform: rotate(30deg)
			}
		}
		& a {
			width: 70%;
			margin: 0 auto;
			text-align: center;
			font-size: 0.9em;
			padding: 20px;
			color: #fff;
			background: #363636;
			border: 1px solid transparent;
			border-radius: 50vh;
			display: block;
			letter-spacing: 2px;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.6em;
				width: 80%;
			}
			&:hover {
				transition: .4s;
				background: #8a8a8a;
			}
		}
	}	
	
}
p.attention {
	font-size: 0.6em;
	text-align: center;
}
#answer_01 {
	& h3 {
		& span {color: $spring;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $spring 100%);
		border-image-slice: 1;
	}
}
#answer_02 {
	& h3 {
		& span {color: $summer;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $summer 100%);
		border-image-slice: 1;
	}
}
#answer_03 {
	& h3 {
		& span {color: $autumn;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $autumn 100%);
		border-image-slice: 1;
	}
}
#answer_04 {
	& h3 {
		& span {color: $winter;}
	} & .box div .border span {
		border-image: linear-gradient(to right, #d7d7d7 0%, $winter 100%);
		border-image-slice: 1;
	}
}
.all-type {
		width: 80%;
		margin: 10% auto;
		text-align: center;
		@include max-screen($breakpoint-mobile) {
			width: 100%;
		}
		& h2 {
			font-size: 1.0em;
			position: relative;
			display: inline-block;
			color: #565656;
			margin-bottom: 5%;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				line-height: 2.2;
			}
			& span {
				font-size: 1.0em;
			}
			&::before, &::after {
				content: "";
                position: absolute;
                left: 52%;
                margin-left: -15px;
				width: 10px;
				height: 10px;
                border-bottom: 1px solid #565656;
                border-right: 1px solid #565656;
				transform: rotate(45deg);
				@include max-screen($breakpoint-mobile) {
					width: 7px;
					height: 7px;
				}
				}
			&::before {
                bottom: -20px;
				@include max-screen($breakpoint-mobile) {
					bottom: -10px;
				}
			}
			&::after {
                bottom: -15px;
				@include max-screen($breakpoint-mobile) {
					bottom: -5px;
				}
			}

		}
		& div {
			display: flex;
			justify-content: center;
			align-items: center;
			& a {
				padding: 1%;
				@include max-screen($breakpoint-mobile) {
					padding: 0.5%;
				}
				&:hover {
					transition: .4s;
					opacity: 0.7;
				}
			}
		}
	}	

#contents {
	margin:15% auto 10%;
	@include max-screen($breakpoint-mobile) {
		margin-top: 20%;
	}
& h2.Contents-ttl {
		  font-size: 33px;
		  font-weight: 400;
		  line-height: 1.0;
		  text-align: center;
		  margin-bottom: 6%;
		  color: #3e3a39;
			& span {
			  font-size: 43%;
			  font-weight: 400;
			  color: #3e3a39;
			}
		}
	& .contents a {
	  display: block;
	  flex-wrap: nowrap;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	}
& .newsList {
	& ul {
		max-width: 1000px;
		margin: 5% auto 0;
	& li {
		width: 22%;
	  margin-bottom: 2%;
	  margin-right: 0.5%;
		@include max-screen($breakpoint-mobile) {
			 width: 44%;
		}
		& dl {
	  margin-top: 3%;
	  margin-left: 1%;
		& dt {
		  font-size: 12px;
		}
		& dd {
		  font-size: 11px;
		}
	}
		 & a {
		  display: block;
		  flex-wrap: nowrap;
		  width: 100%;
		  justify-content: center;
		  align-items: center;
		}
	} 
	}
}
}