@charset "utf-8";
/*
 * オンラインカウンセリング
 */
/* フェードアニメーション */
@keyframes occ-show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* イラスト移動アニメーション */
@keyframes occ-illust-sc-scroll {
	0% {
		left: 0px
	}
	100% {
		left: -760px
	}
}
@keyframes sp-occ-illust-scroll {
	0% {
		left: 0px
	}
	100% {
		left: -629px
	}
}

/* TypeSquare読み込みテキスト */
.ts-hide {
	overflow: hidden;
	position: absolute;
	z-index: -1;
	height: 0;
	font-family: "Hiragino Kaku Gothic W3 JIS2004", sans-serif;
}

#occ {
	margin-top: -38px;
	padding: 113px 0 0;
	letter-spacing: 0;
	font-feature-settings: "palt";
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#occ .occ-wrap {
	max-width: 840px;
	margin: 0 auto;
}
#occ .pc-none {
	display: none;
}

#occ p,
#occ ul,
#occ dl,
#occ dt,
#occ dd {
	margin: 0;
	padding: 0;
}
#occ li {
	list-style: none;
}
#occ dt,
#occ dd {
	float: none;
	min-width: 0;
}

/*
 *トップ
 */
#occ #occ-top {
	text-align: center;
	opacity: 1;
	transition: opacity .5s linear;
	animation: occ-show .5s ease;
}
#occ #occ-top.invisible {
	visibility: hidden;
	opacity: 0;
}
#occ #occ-top .title {
	margin: 0 auto;
	padding: 30px 0 10px;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: 2px;
}
#occ #occ-top .title small {
	color: #646464;
	font-size: 14px;
	letter-spacing: 1.2px;
}
#occ #occ-top p {
	margin-bottom: 40px;
	padding-left: 6px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 1.5px;
}
#occ #occ-top p.sub-copy {
	margin-bottom: 0;
	font-size: 16px;
}
#occ #occ-top p.sub-copy span {
	display: inline-block;
	padding: 0 3px 7px;
	border-bottom: 1px solid #323232;
}
#occ #occ-top div.illust {
	overflow: hidden;
	display: block;
	position: relative;
	width: 760px;
	height: 110px;
	margin: 0 auto;
}
#occ #occ-top div.illust::after {
	content: none;
}
#occ #occ-top div.illust div.occ {
	position: absolute;
	top: 0;
	left: 0;
	width: 1520px;
	height: 100%;
	background: url(img/illust_products.png) repeat-x 0 0;
	animation: occ-illust-sc-scroll 20s linear 0s infinite;
}
#occ #occ-top .occ-nav ul {
	flex-direction: row;
	justify-content: center;
	margin: 59px auto 0;
}
#occ #occ-top .occ-nav li {
	width: 170px;
	margin: 0;
	padding: 0;
	border-color: #323232;
	letter-spacing: 1px;
}
#occ #occ-top .occ-nav li a {
	display: block;
	height: 100%;
	padding: 10px 0;
}

/*
 * 設問
 */
#occ #occ-block {
	position: relative;
	min-height: 410px;
	animation: occ-show .5s ease;
}
#occ .q-block {
	display: none;
	position: absolute;
	left: 0;
	width: 100%;
	height: 360px;
	margin-top: 51px;
	padding-top: 20px;
	border-top: 1px solid #646464;
	background-color: #fff;
}
#occ .q-block::after {
	position: absolute;
	top: -24px;
	right: 10px;
	width: 41px;
	height: 6px;
	background: url(img/at.png) no-repeat 0 0;
	content: "";
}
#occ #occ-q1::after {
	background-position: -35px 0;
}
#occ #occ-q2::after {
	background-position: -26px 0;
}
#occ #occ-q3::after {
	background-position: -17px 0;
}
#occ #occ-q4::after {
	background-position: -8px 0;
}
#occ #occ-q5::after {
	background-position: 0 0;
}
#occ .q-block.current {
	display: block;
	animation: occ-show .5s ease;
}
#occ .q-block .q-title {
	position: relative;
	margin: 0;
	padding: 0 0 0 125px;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 1.5px;
}
#occ .q-block .q-title span.num {
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
	width: 109px;
	color: #646464;
	font-family: "Hiragino Kaku Gothic W6 JIS2004", sans-serif;
	font-size: 18px;
	text-align: center;
}
#occ .q-block .ans-block {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 296px;
	padding: 103px 0 0 50%;
	text-align: center;
}
#occ .q-block .ans-block::before {
	position: absolute;
	top: 47px;
	left: -10px;
	width: 406px;
	height: 169px;
	background: no-repeat 50% 50%;
	content: "";
}
#occ .q-block .answer {
	display: flex;
	justify-content: center;
}
#occ .q-block .answer li {
	display: block;
	width: 85px;
	min-height: 40px;
	margin: 0 25px 20px;
	padding-top: 10px;
	border: 1px solid #323232;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	transition: opacity .2s ease;
}
#occ .q-block .answer li:hover {
	opacity: 0.5;
}
#occ .q-block .answer li.selected {
	background-color: #FFFAE7 !important;
	cursor: default;
	opacity: 1 !important;
}
/* スライダー */
#occ .occ-range-block dt {
	display: none;
}
#occ .occ-slider-range {
	position: relative;
	width: 400px;
	height: 54px;
	padding: 7px 0 27px;
	font-size: 15px;
}
#occ .occ-slider-range span {
	position: absolute;
	bottom: 0;
	font-size: 12px;
	text-align: left;
}
#occ .occ-slider-range span:first-child {
	left: 0;
	color: rgb(50,50,50);
}
#occ .occ-slider-range span:last-child {
	right: 0;
	color: rgb(235,235,235);
	text-align: right;
}
#occ .occ-slider-range .occ-slider {
	position: relative;
	width: 100%;
	height: 20px;
	background: no-repeat 50% 50%;
	cursor: pointer;
}
#occ .occ-slider-range .occ-slider .occ-range {
	position: absolute;
	top: -6px;
	left: 0;
	width: 0%;
	height: 33px;
	border-right: 2px solid #666;
}
#occ .occ-slider-range .occ-slider .occ-handle {
	position: absolute;
	top: 0;
	left: 0%;
	bottom: 0;
	width: 30px;
	height: inherit;
	margin: auto 0;
	cursor: col-resize;
}
/* ナビゲーション */
#occ #occ-block .occ-nav {
	overflow: hidden;
	position: absolute;
	right: 0;
	bottom: 0;
}
#occ .occ-nav ul {
	display: flex;
	flex-direction: row-reverse;
}
#occ .occ-nav li {
	height: 40px;
	margin-left: 15px;
	padding: 10px 0;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	opacity: 1;
	transition: opacity .2s ease;
}
#occ .occ-nav li:hover {
	opacity: 0.5;
}
/* 次へ */
#occ .occ-nav li.next {
	width: 170px;
	border-color: #EBEBEB;
	color: #EBEBEB;
	cursor: default;
	opacity: 1 !important;
}
#occ .occ-nav li.next.possible {
	border-color: #323232;
	color: #323232;
	cursor: pointer;
}
#occ .occ-nav li.next.possible:hover {
	opacity: 0.5 !important;
}
/* 前へ */
#occ .occ-nav li.prev {
	width: 85px;
	border-color: #646464;
	color: #646464;
}
/* TOPへ */
#occ .occ-nav li.to-top {
	width: 40px;
	margin-left: 0;
	padding: 12px 0;
	border-color: #969696;
	border-radius: 50%;
	color: #969696;
	font-size: 11px;
}

/* Q1～Q5 */
#occ #occ-q1 .occ-slider-range .occ-slider,
#occ #occ-q3 .occ-slider-range .occ-slider {
	background-image: url(img/slider_bg_b.png);
}
#occ #occ-q2 .occ-slider-range .occ-slider,
#occ #occ-q4 .occ-slider-range .occ-slider {
	background-image: url(img/slider_bg_c.png);
}
/* Q1 */
#occ #occ-q1 .ans-block::before {
	background-image: url(img/face_b.png);
}
/* Q2 */
#occ #occ-q2 .ans-block::before {
	background-image: url(img/face_c.png);
}
/* Q3 */
#occ #occ-q3 .ans-block::before {
	background-image: url(img/neck_b.png);
}
/* Q4 */
#occ #occ-q4 .ans-block::before {
	background-image: url(img/neck_c.png);
}
/* Q5 */
#occ #occ-q5 .ans-block {
	padding-top: 112px;
}
#occ #occ-q5 .ans-block::before {
	background-image: url(img/fd_b.png);
}
#occ #occ-q5 .answer {
	padding-right: 20px;
}

/*
 * 結果ページ
 */
#occ #occ-result {
	position: relative;
	margin: 53px 0 0;
	padding: 21px 0 0;
	border-top: 1px solid #646464;
	animation: occ-show .5s ease;
}
#occ #occ-result::after {
	position: absolute;
	top: -24px;
	right: 10px;
	width: 41px;
	height: 6px;
	background: url(img/at.png) no-repeat 0 0;
	content: "";
}
#occ #occ-result .result-title {
	position: relative;
	margin: 0;
	padding: 0 125px;
	font-size: 20px;
	line-height: 1.6;
	text-align: center;
	letter-spacing: 1.8px;
}
#occ #occ-result .result-title span.num {
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
	width: 109px;
	color: #646464;
	font-family: "Hiragino Kaku Gothic W6 JIS2004", sans-serif;
	font-size: 18px;
	text-align: center;
	letter-spacing: 0.5px;
}
#occ #occ-fd-color {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
	margin: 40px auto 77px;
	border-radius: 50%;
	font-size: 18px;
	letter-spacing: 1px;
}
#occ #occ-fd-color::before {
	content: attr(data-color);
}
#occ #occ-fd-color[data-color="001"] {
	background-color: #e6c8a4;
}
#occ #occ-fd-color[data-color="100"] {
	background-color: #ecccab;
}
#occ #occ-fd-color[data-color="101"] {
	background-color: #e8be9b;
}
#occ #occ-fd-color[data-color="102"] {
	background-color: #e2b493;
}
#occ #occ-fd-color[data-color="103"] {
	background-color: #d9ad94;
}
#occ #occ-fd-color[data-color="201"] {
	background-color: #e9c1a8;
}
#occ .fd-image {
	display: flex;
}
#occ .fd-image p {
	flex: 0 0 auto;
	width: 358px;
	margin: 38px 71px 0 48px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.8px;
}
#occ .fd-image p::after {
	display: block;
	width: 176px;
	height: 168px;
	margin: 43px 0 0 84px;
	background: no-repeat 50% 50%;
	content: "";
}
#occ .fd-image[data-color="001"] p::after {
	background-image: url(img/result/fd_image_001.png);
}
#occ .fd-image[data-color="100"] p::after {
	background-image: url(img/result/fd_image_100.png);
}
#occ .fd-image[data-color="101"] p::after {
	background-image: url(img/result/fd_image_101.png);
}
#occ .fd-image[data-color="102"] p::after {
	background-image: url(img/result/fd_image_102.png);
}
#occ .fd-image[data-color="103"] p::after {
	background-image: url(img/result/fd_image_103.png);
}
#occ .fd-image[data-color="201"] p::after {
	background-image: url(img/result/fd_image_201.png);
}
#occ #occ-chart {
	position: relative;
	width: 316px;
	height: 316px;
	background: url(img/result/chart.png) no-repeat 50% 50%;
}
#occ #occ-chart > div {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 260px;
	height: 260px;
}
#occ #occ-chart #occ-star {
	width: 1px;
	height: 1px;
	opacity: 0;
	outline: none;
	cursor: grab;
}
#occ #occ-chart #occ-star.shown {
	opacity: 1;
}
#occ #occ-chart #occ-star svg {
	transform: translate(-50%, -50%);
}

/* ナビ */
#occ .occ-footer-nav {
	margin: 50px 0 0;
}
#occ .occ-footer-nav ul {
	display: flex;
	flex-wrap: wrap;
	width: 420px;
	margin: 0 auto 30px;
}
#occ .occ-footer-nav li {
	width: 200px;
	margin: 0 5px 10px;
	font-family: "Hiragino Kaku Gothic W6 JIS2004";
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 1.2px;
}
#occ .occ-footer-nav li a {
	display: block;
	padding: 9px 0;
	border-radius: 5px;
	background-color: #ecebef;
	color: #595757;
	text-align: center;
	transition: opacity .2s linear;
}
#occ .occ-footer-nav li a:hover {
	opacity: 0.5;
}
#occ .occ-footer-nav p {
	width: 280px;
	margin: 0 auto 16px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 1.2px;
}
#occ .occ-footer-nav p a {
	display: block;
	padding: 9px 0;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	transition: opacity .2s linear;
}
#occ .occ-footer-nav p a:hover {
	opacity: 0.5;
}


/*-----
 *  Mobile Layout: ～768px
 */
@media screen and (max-width: 768px) {
	#occ {
		margin: -17px -22px 0;
		padding-top: 70px;
	}
	#occ .occ-wrap {
		max-width: none;
	}
	#occ .pc-none {
		display: block;
	}
	#occ br.pc-none {
		display: inline;
	}
	#occ .sp-none {
		display: none;
	}
	
	/*
	 *トップ
	 */
	#occ #occ-top .title {
		padding: 53px 0 17px;
		font-size: 20px;
		font-size: 5.33vw;
	}
	#occ #occ-top .title small {
		font-size: 14px;
		font-size: 3.73vw;
	}
	#occ #occ-top p {
		margin-bottom: 53px;
		padding-left: 0;
		font-size: 14px;
		font-size: 3.73vw;
		line-height: 1.75;
	}
	#occ #occ-top p.sub-copy {
		font-size: 16px;
		font-size: 4.27vw;
	}
	#occ #occ-top p.sub-copy span {
		padding-bottom: 5px;
	}
	#occ #occ-top div.illust {
		width: 100%;
		max-width: 2516px;
		height: 91px;
	}
	#occ #occ-top div.illust div.occ {
		width: 1258px;
		background-image: url(img/sp_illust_products.png);
		background-size: 629px 91px;
		animation: sp-occ-illust-scroll 20s linear 0s infinite;
	}
	#occ #occ-top .occ-nav ul {
		margin-top: 50px;
	}
	#occ #occ-top .occ-nav li {
		width: 54.7vw;
		margin: 0 auto;
	}
	#occ #occ-top .occ-nav li a {
		padding: 11px 0;
	}
	
	/*
	 * 設問
	 */
	#occ #occ-block {
		overflow: hidden;
		min-height: 0;
		padding-left: 15px;
		padding-right: 15px;
	}
	#occ .q-block {
		position: relative;
		height: auto;
		min-height: 394px;
		margin-top: 42px;
		padding-top: 24px;
		text-align: center;
	}
	#occ .q-block::after {
		top: -23px;
		right: 6px;
		width: 44px;
		height: 6px;
		background-image: url(img/sp_at.png);
		background-size: auto 6px;
	}
	#occ .q-block .q-title {
		display: inline-block;
		position: static;
		padding: 0;
		font-size: 14.5px;
		font-size: 3.87vw;
		line-height: 1.5;
		text-align: left;
		vertical-align: bottom;
		letter-spacing: 1px;
	}
	#occ .q-block .q-title span.num {
		top: -33px;
		right: 0;
		width: 3em;
		margin: 0 auto;
	}
	#occ .q-block .ans-block {
		position: relative;
		height: auto;
		padding: 64px 0 0;
	}
	#occ .q-block .ans-block::before {
		display: block;
		position: static;
		margin: 0 auto 27px;
		width: 329px;
		height: 162px;
		background-size: contain;
	}
	#occ .q-block .answer li {
		width: 90px;
		min-height: 35px;
		margin: 0 35px 20px;
		padding-top: 7px;
		opacity: 1 !important;
		transition: none;
	}
	/* スライダー */
	#occ .occ-slider-range {
		width: 100%;
		max-width: 330px;
		height: 57px;
		margin: 0 auto;
		padding: 7px 0 30px;
	}
	#occ .occ-slider-range span {
		font-size: 10.5px;
		letter-spacing: 1px;
	}
	#occ .occ-slider-range .occ-slider {
		height: 23px;
		background-size: contain;
	}
	#occ .occ-slider-range .occ-slider .occ-range {
		top: -7px;
		height: 37.5px;
	}
	#occ .occ-slider-range .occ-slider .occ-handle {
		width: 40px;
	}
	/* ナビゲーション */
	#occ #occ-block .occ-nav {
		position: static;
		padding: 0 7px;
	}
	#occ .occ-nav li {
		height: 45px;
		margin-left: 17px;
		padding: 11px 0;
		font-size: 16px;
		opacity: 1 !important;
		transition: none;
	}
	/* 次へ */
	#occ .occ-nav li.next {
		flex-grow: 3;
		width: 180px;
	}
	#occ .occ-nav li.next.possible:hover {
		opacity: 1 !important;
	}
	/* 前へ */
	#occ .occ-nav li.prev {
		flex: 2 0 auto;
		width: 70px;
	}
	/* TOPへ */
	#occ .occ-nav li.to-top {
		flex: 0 0 auto;
		width: 45px;
		padding: 15px 0;
		font-size: 12px;
	}
	
	/* Q1～Q5 */
	#occ #occ-q1 .occ-slider-range .occ-slider,
	#occ #occ-q3 .occ-slider-range .occ-slider {
		background-image: url(img/sp_slider_bg_b.png);
	}
	#occ #occ-q2 .occ-slider-range .occ-slider,
	#occ #occ-q4 .occ-slider-range .occ-slider {
		background-image: url(img/sp_slider_bg_c.png);
	}
	/* Q1 */
	#occ #occ-q1 .ans-block::before {
		background-image: url(img/sp_face_b.png);
	}
	/* Q2 */
	#occ #occ-q2 .ans-block::before {
		background-image: url(img/sp_face_c.png);
	}
	/* Q3 */
	#occ #occ-q3 .ans-block::before {
		background-image: url(img/sp_neck_b.png);
	}
	/* Q4 */
	#occ #occ-q4 .ans-block::before {
		background-image: url(img/sp_neck_c.png);
	}
	/* Q5 */
	#occ #occ-q5 .ans-block {
		padding-top: 64px;
	}
	#occ #occ-q5 .ans-block::before {
		margin-bottom: 35px;
		background-image: url(img/sp_fd_b.png);
	}
	#occ #occ-q5 .answer {
		padding-right: 0;
	}
	
	/*
	 * 結果ページ
	 */
	#occ #occ-result {
		margin: 42px 15px 0;
		padding: 0;
	}
	#occ #occ-result::after {
		top: -23px;
		right: 5px;
		width: 44px;
		height: 6px;
		background-image: url(img/sp_at.png);
		background-size: auto 6px;
	}
	#occ #occ-result .result-title {
		padding: 43px 0 0;
		font-size: 20px;
		font-size: 5.33vw;
	}
	#occ #occ-result .result-title span.num {
		top: -34px;
		right: 0;
		width: 3em;
		margin: 0 auto;
	}
	#occ #occ-fd-color {
		width: 125px;
		height: 125px;
		margin: 32px auto 67px;
		font-size: 15px;
	}
	#occ .fd-image {
		flex-direction: column-reverse;
	}
	#occ .fd-image p {
		width: auto;
		margin: 27px 17px 0;
		font-size: 14.5px;
		font-size: 3.87vw;
		letter-spacing: 0.6px;
	}
	#occ .fd-image p::after {
		width: 148px;
		height: 140px;
		margin: 24px auto 0;
		background-size: contain;
	}
	#occ .fd-image[data-color="001"] p::after {
		background-image: url(img/result/sp_fd_image_001.png);
	}
	#occ .fd-image[data-color="100"] p::after {
		background-image: url(img/result/sp_fd_image_100.png);
	}
	#occ .fd-image[data-color="101"] p::after {
		background-image: url(img/result/sp_fd_image_101.png);
	}
	#occ .fd-image[data-color="102"] p::after {
		background-image: url(img/result/sp_fd_image_102.png);
	}
	#occ .fd-image[data-color="103"] p::after {
		background-image: url(img/result/sp_fd_image_103.png);
	}
	#occ .fd-image[data-color="201"] p::after {
		background-image: url(img/result/sp_fd_image_201.png);
	}
	#occ #occ-chart {
		width: 268px;
		height: 264px;
		margin: 0 auto;
		background-image: url(img/result/sp_chart.png);
		background-size: contain;
	}
	#occ #occ-chart > div {
		top: 5px;
		right: 10px;
		width: 220px;
		height: 220px;
	}
	#occ #occ-chart #occ-star svg {
		width: 26px;
		height: 25px;
	}
	
	/* ナビ */
	#occ .occ-footer-nav ul {
		flex-direction: column;
		width: auto;
		margin-bottom: 17px;
	}
	#occ .occ-footer-nav li {
		width: 100%;
		margin: 0 0 12px;
		font-size: 17.5px;
		font-size: 4.67vw;
		letter-spacing: 1.5px;
	}
	#occ .occ-footer-nav li a {
		padding: 16.5px 0;
		opacity: 1 !important;
		transition: none;
	}
	#occ .occ-footer-nav p {
		width: 100%;
		padding: 0 7px;
		font-size: 14px;
		font-size: 3.73vw;
	}
	#occ .occ-footer-nav p a {
		opacity: 1 !important;
		transition: none;
	}
} /* Mobile Layout */