@charset "utf-8";

/* base override */
body {
	margin-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	-webkit-text-size-adjust: 100% !important;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
	background:url(/beauty/1colorselect/common/img/spacer.gif) no-repeat;
	-webkit-text-size-adjust: 100%;
	max-height: 999999px;
}

p {
	padding: 0;
	margin: 0;
	background:url(/beauty/1colorselect/common/img/spacer.gif) no-repeat;
	max-height: 999999px;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li {
	margin: 0;
	padding: 0;
}

dl {
	margin: 0;
	padding: 0;
}

dt {
	margin: 0;
	padding: 0;
}

dd {
	margin: 0;
	padding: 0;
}

/*---------- ヘルパークラス ----------*/

/* hover */
.hover{
	opacity: 1;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
	-ms-filter: "alpha( opacity=100 )";
	filter: alpha(opacity=100);
	zoom:1;
}
.hover:hover {
	opacity: 0.8;
	-ms-filter: "alpha( opacity=80 )";
	filter: alpha(opacity=80);
}

/* IE8対策 */
.hover * {
	filter: alpha(opacity=100)\9; /* IE10以下 */
}
.hover:hover * {
	filter: alpha(opacity=80)\9;
}
.hover:hover *:not(:target) {
  filter: alpha(opacity=100)\9; /* IE9, 10 */
}


/* clearfix */
.cf:before, .cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

/*---------- #body override ----------*/

#body {
	min-height:0 !important;
	padding:15px 0 10px !important;
}
#body .group{
	padding-bottom:0;
}
.footer_script{
	height:0 !important;
	overflow: hidden;
}

/*---------- #main02 ----------*/

#main02 {
	margin: 0;
	padding:0;
	background-color: #eaeaea;
	-webkit-font-feature-settings:'palt' 1;
	font-feature-settings:'palt' 1;
	font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans","ヒラギノ角ゴシック",'メイリオ',Meiryo,'ＭＳ Ｐゴシック',Tahoma,sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 640px){
	#main02 {
		letter-spacing:0.1em;
	}
}
@media screen and (-ms-high-contrast:none){
  #main02 {
		letter-spacing:0 !important;
	}
}

#main02 .inner {
	position:relative;
	margin: 0 auto;
	width: 960px;
	text-align: left;
	line-height: 1.5em;
}

/*  step  */
.sec_main .step{
	text-align: right;
	padding:20px 40px 30px;
}
.sec_main .step li{
	display:inline-block;
	width:40px;
	height:40px;
	background-color: #fff;
	border:solid 2px #df0067;
	border-radius:20px;
	text-align: center;
	color:#df0067;
	font-size:24px;
	line-height:24px;
	font-weight:600;
	padding:6px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	vertical-align: baseline;
	margin-left:20px;
}
.sec_main .step li.current{
	color:#fff;
	background-color: #df0067;
}


/*  btn_bottom  */
.btn_bottom{
	text-align: center;
	padding:60px 0 100px;
}
a.btn_back{
	display:inline-block;
	width:200px;
	color:#fff;
	background-color: #df0067;
	font-size:22px;
	line-height:50px;
	font-weight:400;
	border-radius:50px;
	overflow: hidden;
	text-align: center;
	text-decoration:none;
	position:relative;
	margin: 0 10px;
}
a.btn_back:before{
	content:'';
	display:block;
	width:13px;
	height:20px;
	background: url(/beauty/1colorselect/common/img/bullet_right.svg) no-repeat 0 0;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
	position:absolute;
	left:20px;
	top:50%;
	margin-top:-10px;
}

/* sec_main */
.sec_main{
	background: url(/beauty/1colorselect/common/img/cmn_bg.jpg) no-repeat center center;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	min-height:280px;
}
.sec_main h2{
	text-align: center;
	color:#df0068;
	font-size:52px;
	line-height:72px;
	font-weight:300;
}
.sec_main_txt{
	text-align: center;
	font-size:28px;
	line-height:48px;
	font-weight:300;
}


/*  step1  */
.step1 .sec_select{
	padding:1px 0;
}
.step1 .sec_select .inner{
	width:900px !important;
}
.step1 .choice{
	background-color: #fff;
	border-radius:15px;
	overflow: hidden;
	margin:60px 0 0;
	padding:60px 0 60px 40px;
	position:relative;
}
.step1 .choice > dl{
	display:inline-block;
	vertical-align: middle;
}
.step1 .choice_ttl{
	width:292px;
}
.step1 .choice_ttl dt{
	font-size:46px;
	line-height:46px;
	font-weight:600;
	margin:0 0 20px;
}
.step1 .choice_ttl .color_sample li{
	display:inline-block;
	width:124px;
	height:124px;
	border-radius:62px;
	overflow: hidden;
	margin-right:20px;
}
.step1 .color_sample li.color1_1{
	background-color: #f1c6a6;
}
.step1 .color_sample li.color1_2{
	background-color: #f0bea3;
}
.step1 .color_sample li.color2_1{
	background-color: #efbf9b;
}
.step1 .color_sample li.color2_2{
	background-color: #e2b190;
}
.step1 .color_sample li.color3_1{
	background-color: #dba988;
}
.step1 .color_sample li.color3_2{
	background-color: #d0a280;
}

.step1 .choice_body{
	width:500px
}
.step1 .choice_body dt{
	font-size:26px;
	line-height:38px;
	font-weight:600;
	margin:0 0 10px;
}

.step1 .choice_body li{
	font-size:24px;
	line-height:36px;
	font-weight:300;
}
.step1 .choice_body li:before{
	content:'・ ';
	color:#aaa;
}

.step1 .choice .btn_select{
	position:absolute;
	right:40px;
	bottom:60px;
	width:240px;
}
.step1 .choice .btn_select a{
	display:block;
	background-color: #df0067;
	color:#fff;
	font-size:22px;
	line-height:60px;
	font-weight:400;
	text-align: center;
	border-radius:30px;
	overflow: hidden;
	position:relative;
	text-decoration:none;
}
.step1 .choice .btn_select a:after{
	content:'';
	display:block;
	width:13px;
	height:20px;
	background: url(/beauty/1colorselect/common/img/bullet_right.svg) no-repeat 0 0;
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-10px;
}
.step1 .choice .btn_select a:link,
.step1 .choice .btn_select a:hover,
.step1 .choice .btn_select a:visited,
.step1 .choice .btn_select a:active{
	color:#fff !important;
}

.step1 .sec_select_note{
	text-align: right;
	margin:20px 0 0;
	font-size:18px;
	font-weight:200;
}



/*  step2  */
.step2 .sec_select{
	padding:1px 0;
}
.step2 .sec_select .inner{
	width:900px !important;
}
.step2 .choice{
	background-color: #fff;
	border-radius:15px;
	overflow: hidden;
	margin:60px 0 0;
	padding:60px 40px;
	position:relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	min-height:420px;
}
.step2 .choice h3{
	font-size:46px;
	line-height:46px;
	font-weight:600;
	margin:0 0 10px;
}
.step2 .choice_txt{
	font-size:26px;
	line-height:38px;
	font-weight:600;
	margin:0 0 40px;
}
.step2 .choice_img{
	position:absolute;
	top:0;
	right:0;
}

.step2 .choice_body{
	position:absolute;
	left:40px;
	bottom:60px;
	border:solid 2px #eba4b7;
	background-color: #eba4b7;
	border-radius:8px;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	width:515px;
}
.step2 .choice_body dt{
	background-color: #eba4b7;
	color:#fff;
	font-size:24px;
	line-height:51px;
	font-weight:600;
	padding:0 23px;
}
.step2 .choice_body dd{
	font-size:28px;
	line-height:78px;
	font-weight:600;
	padding:0 0 0 23px;
	background:#fff url(/beauty/1colorselect/common/img/spacer.gif) no-repeat;
}

.step2 .choice .btn_select{
	position:absolute;
	right:20px;
	bottom:20px;
	width:230px;
}
.step2 .choice .btn_select a{
	display:block;
	background-color: #df0067;
	color:#fff;
	font-size:22px;
	line-height:60px;
	font-weight:400;
	text-align: center;
	border-radius:30px;
	overflow: hidden;
	position:relative;
	text-decoration:none;
}
.step2 .choice .btn_select a:after{
	content:'';
	display:block;
	width:13px;
	height:20px;
	background: url(/beauty/1colorselect/common/img/bullet_right.svg) no-repeat 0 0;
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-10px;
}
.step2 .choice .btn_select a:link,
.step2 .choice .btn_select a:hover,
.step2 .choice .btn_select a:visited,
.step2 .choice .btn_select a:active{
	color:#fff !important;
}



/*  result  */

.result .sec_main{
	padding-bottom:66px;
}
.result .sec_main_circle{
	position:absolute;
	top:73px;
	left:0;
}
.result .sec_main_category{
	display:inline-block;
	min-width:5.9em;
	margin-left:235px;
	font-size:28px;
	line-height:28px;
	font-weight:600;
	padding-bottom:5px;
	background:url(/beauty/1colorselect/common/img/line_dot.png) repeat-x left bottom;
	margin-bottom:10px;
  margin-right: -1px;
  white-space:nowrap;
}
.result .sec_main_category:after{
	content:'.';
	width: 0;
	height:0;
	font-size: 0;
	color: transparent;
	margin-right: 1px;
}
.result .sec_main h2{
	text-align: left;
	padding-left:235px;
	font-size:46px;
	line-height:68px;
	font-weight:600;
	margin-bottom:40px;
}
.result .sec_main_anchor{
	text-align: center;
}
.result .sec_main_anchor li{
	display:inline-block;
	width:430px;
	margin:0 20px;
}
.result .sec_main_anchor a{
	display:block;
	background-color: #fff;
	border:solid 2px #eba4b7;
	background-color: #eba4b7;
	border-radius:15px;
	overflow: hidden;
	text-decoration:none;
	position:relative;
	outline:0 none;
}
.result .sec_main_anchor .catch{
	display:block;
	background-color: #eba4b7;
	/*border-radius:10px 10px 0 0;*/
	color:#fff;
	font-size:24px;
	line-height:50px;
	font-weight:600;
}
.result .sec_main_anchor .type{
	display:block;
	color:#df0067;
	background-color: #fff;
	border-radius:0 0 10px 10px;
	font-size:24px;
	line-height:40px;
	font-weight:600;
	text-align: left;
	padding:25px 58px 30px;
	position:relative;
}
.result .sec_main_anchor .type em{
	font-size:34px;
	font-weight:600;
}
.result .sec_main_anchor .type:after{
	content:'';
	display:block;
	width:62px;
	height:64px;
	position:absolute;
	right:30px;
	top:50%;
	margin-top:-32px;
	background: url(/beauty/1colorselect/common/img/arrow_down.svg) no-repeat center center;
}



.result .sec_body{
	padding:1px 0;
}
.result .sec_body .inner{
	width:900px !important;
}
.result .box{
	background-color: #fff;
	border-radius:15px;
	overflow: hidden;
	margin:60px 0 0;
	padding-bottom:60px;
}
.result .box h3{
	background-color: #eba4b7;
	color:#fff;
	text-align: center;
	font-size:28px;
	line-height:74px;
	font-weight:600;
}
.result .box .catch{
	color:#df0067;
	text-align: center;
	font-size:46px;
	line-height:143px;
	font-weight:600;
}
.result .color_main{
	text-align: center;
}
.result .color_main li{
	display:inline-block;
	width:389px;
	vertical-align: top;
	text-align: center;
	margin-top:60px;
}
.result .color_main li:nth-child(1),
.result .color_main li:nth-child(2){
	margin-top:0;
}
.result .color_main li:nth-child(odd){
	border-right:solid 2px #f8dde4;
}

.result .color_main li p{
	display:inline-block;
	margin-top:30px;
	text-align: left;
	font-size:24px;
	line-height:40px;
	font-weight:300;
	white-space:nowrap;
}
.result .color_main li p em{
	font-weight:600;
}
.result .irodama{
	display:block;
	margin:0 auto;
}

.result .box h4{
	margin:80px 60px 40px;
	background-color: #eba4b7;
	color:#fff;
	text-align: center;
	border-radius:8px;
	font-size:24px;
	line-height:55px;
	font-weight:600;
}
.result .color_sub{
	text-align: center;
	width:780px;
	margin:auto;
	overflow: hidden;
}
.result .color_sub dl{
	display:inline-block;
	width:259px;
	vertical-align: top;
	text-align: center;
	border-right:solid 2px #f8dde4;
	border-left:solid 2px #f8dde4;
	margin:0 -1px;
}
.result .color_sub dl:nth-child(3n+1){
	margin-left:-3px;
}
.result .color_sub dl:nth-child(3n){
	margin-right:-3px;
}
.result .color_sub dl dt{
	font-size:24px;
	line-height:36px;
	font-weight:600;
	margin-bottom:20px;
}
.result .color_sub dl dd{
	margin-top:20px;
}
.result .color_sub dl dd p{
	text-align: left;
	margin:20px 30px 0;
	font-size:20px;
	line-height:32px;
	font-weight:300;
}
.result .color_sub dl dd p em{
	font-size:20px;
	font-weight:600;
}

.result .color_main2{
	text-align: left;
	width:780px;
	margin:auto;
	overflow: hidden;
	margin-top:-60px;
}
.result .color_main2 li{
	display:inline-block;
	width:259px;
	vertical-align: top;
	text-align: center;
	border-right:solid 2px #f8dde4;
	border-left:solid 2px #f8dde4;
	margin:60px -1px 0;
}
.result .color_main2 li:nth-child(3n+1){
	margin-left:-3px;
}
.result .color_main2 li:nth-child(3n){
	margin-right:-3px;
}
.result .color_main2 li p{
	text-align: left;
	margin:20px 30px 0;
	font-size:24px;
	line-height:36px;
	font-weight:300;
}
.result .color_main2 li p em{
	font-weight:600;
}

.result .result_note{
	margin:10px 0 0;
	font-size:18px;
	font-weight:300;
	line-height:34px;
	text-indent: -1em;
	padding-left:1em;
	max-height: 999999px;
}

.result .box_other{
	background-color: #fff;
	border-radius:15px;
	margin:60px 0 0;
	height:230px;
	position:relative;
}
.result .box_other dt{
	font-size:26px;
	line-height:42px;
	font-weight:300;
	padding:30px 60px;
}
.result .box_other dt em{
	font-size:36px;
}
.result .box_other dd{
	position:absolute;
	top:137px;
	left:375px;
	width:200px;
}

.result a.btn_check{
	display:block;
	background-color: #df0067;
	color:#fff;
	font-size:22px;
	line-height:50px;
	font-weight:400;
	text-align: center;
	border-radius:25px;
	overflow: hidden;
	position:relative;
	text-decoration:none;
}
.result a.btn_check:after{
	content:'';
	display:block;
	width:13px;
	height:20px;
	background: url(/beauty/1colorselect/common/img/bullet_right.svg) no-repeat 0 0;
	position:absolute;
	right:20px;
	top:50%;
	margin-top:-10px;
}
.result a.btn_check:link,
.result a.btn_check:hover,
.result a.btn_check:visited,
.result a.btn_check:active{
	color:#fff !important;
}


/* 20240726 add */
#header_third,
#footer_third {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
}