@charset "utf-8";
/* CSS Document */




/******************************************************************************

  OIL CATEGORY

*******************************************************************************/

.oil-list .oil.selected.aroma01 .circle , .oil-list .aroma01 .inner:hover .circle {border-color: #EBA19F;}
.oil-list .oil.selected.aroma02 .circle , .oil-list .aroma02 .inner:hover .circle {border-color: #E39F55;}
.oil-list .oil.selected.aroma03 .circle , .oil-list .aroma03 .inner:hover .circle {border-color: #DEBF99;}
.oil-list .oil.selected.aroma04 .circle , .oil-list .aroma04 .inner:hover .circle {border-color: #DED15E;}
.oil-list .oil.selected.aroma05 .circle , .oil-list .aroma05 .inner:hover .circle {border-color: #AEC462;}
.oil-list .oil.selected.aroma06 .circle , .oil-list .aroma06 .inner:hover .circle {border-color: #BD668A;}
.oil-list .oil.selected.aroma07 .circle , .oil-list .aroma07 .inner:hover .circle {border-color: #6C91B0;}
.oil-list .oil.selected.aroma08 .circle , .oil-list .aroma08 .inner:hover .circle {border-color: #DD675F;}
.oil-list .oil.selected.aroma09 .circle , .oil-list .aroma09 .inner:hover .circle {border-color: #B5A29F;}
.oil-list .oil.selected.aroma10 .circle , .oil-list .aroma10 .inner:hover .circle {border-color: #71A2A3;}
.oil-list .oil.selected.aroma11 .circle , .oil-list .aroma11 .inner:hover .circle {border-color: #9571A3;}
.oil-list .oil.selected.aroma12 .circle , .oil-list .aroma12 .inner:hover .circle {border-color: #80BB8D;}


.oil-list .aroma01 .inner:hover .name .svg-ttl {fill: #EBA19F;}
.oil-list .aroma02 .inner:hover .name .svg-ttl {fill: #E39F55;}
.oil-list .aroma03 .inner:hover .name .svg-ttl {fill: #DEBF99;}
.oil-list .aroma04 .inner:hover .name .svg-ttl {fill: #DED15E;}
.oil-list .aroma05 .inner:hover .name .svg-ttl {fill: #AEC462;}
.oil-list .aroma06 .inner:hover .name .svg-ttl {fill: #BD668A;}
.oil-list .aroma07 .inner:hover .name .svg-ttl {fill: #6C91B0;}
.oil-list .aroma08 .inner:hover .name .svg-ttl {fill: #DD675F;}
.oil-list .aroma09 .inner:hover .name .svg-ttl {fill: #B5A29F;}
.oil-list .aroma10 .inner:hover .name .svg-ttl {fill: #71A2A3;}
.oil-list .aroma11 .inner:hover .name .svg-ttl {fill: #9571A3;}
.oil-list .aroma12 .inner:hover .name .svg-ttl {fill: #80BB8D;}


.graph-box .aroma01 {background: #EBA19F;}
.graph-box .aroma02 {background: #E39F55;}
.graph-box .aroma03 {background: #DEBF99;}
.graph-box .aroma04 {background: #DED15E;}
.graph-box .aroma05 {background: #AEC462;}
.graph-box .aroma06 {background: #BD668A;}
.graph-box .aroma07 {background: #6C91B0;}
.graph-box .aroma08 {background: #DD675F;}
.graph-box .aroma09 {background: #B5A29F;}
.graph-box .aroma10 {background: #71A2A3;}
.graph-box .aroma11 {background: #9571A3;}
.graph-box .aroma12 {background: #80BB8D;}


.aroma01 .circles-valueStroke {stroke: #EBA19F;}
.aroma02 .circles-valueStroke {stroke: #E39F55;}
.aroma03 .circles-valueStroke {stroke: #DEBF99;}
.aroma04 .circles-valueStroke {stroke: #DED15E;}
.aroma05 .circles-valueStroke {stroke: #AEC462;}
.aroma06 .circles-valueStroke {stroke: #BD668A;}
.aroma07 .circles-valueStroke {stroke: #6C91B0;}
.aroma08 .circles-valueStroke {stroke: #DD675F;}
.aroma09 .circles-valueStroke {stroke: #B5A29F;}
.aroma10 .circles-valueStroke {stroke: #71A2A3;}
.aroma11 .circles-valueStroke {stroke: #9571A3;}
.aroma12 .circles-valueStroke {stroke: #80BB8D;}


#sec-result .recipe .recipe-list .aroma01 .name:before{background: #EBA19F;}
#sec-result .recipe .recipe-list .aroma02 .name:before{background: #E39F55;}
#sec-result .recipe .recipe-list .aroma03 .name:before{background: #DEBF99;}
#sec-result .recipe .recipe-list .aroma04 .name:before{background: #DED15E;}
#sec-result .recipe .recipe-list .aroma05 .name:before{background: #AEC462;}
#sec-result .recipe .recipe-list .aroma06 .name:before{background: #BD668A;}
#sec-result .recipe .recipe-list .aroma07 .name:before{background: #6C91B0;}
#sec-result .recipe .recipe-list .aroma08 .name:before{background: #DD675F;}
#sec-result .recipe .recipe-list .aroma09 .name:before{background: #B5A29F;}
#sec-result .recipe .recipe-list .aroma10 .name:before{background: #71A2A3;}
#sec-result .recipe .recipe-list .aroma11 .name:before{background: #9571A3;}
#sec-result .recipe .recipe-list .aroma12 .name:before{background: #80BB8D;}


#sec-result .material .material-list .aroma01 .ttl-area{border-color: #EBA19F;}
#sec-result .material .material-list .aroma02 .ttl-area{border-color: #E39F55;}
#sec-result .material .material-list .aroma03 .ttl-area{border-color: #DEBF99;}
#sec-result .material .material-list .aroma04 .ttl-area{border-color: #DED15E;}
#sec-result .material .material-list .aroma05 .ttl-area{border-color: #AEC462;}
#sec-result .material .material-list .aroma06 .ttl-area{border-color: #BD668A;}
#sec-result .material .material-list .aroma07 .ttl-area{border-color: #6C91B0;}
#sec-result .material .material-list .aroma08 .ttl-area{border-color: #DD675F;}
#sec-result .material .material-list .aroma09 .ttl-area{border-color: #B5A29F;}
#sec-result .material .material-list .aroma10 .ttl-area{border-color: #71A2A3;}
#sec-result .material .material-list .aroma11 .ttl-area{border-color: #9571A3;}
#sec-result .material .material-list .aroma12 .ttl-area{border-color: #80BB8D;}



/******************************************************************************

  BLEND

*******************************************************************************/
.svg-ttl{
    display:none;
}
.inlinesvg .svg-ttl{
	display:inline;
}
.png-ttl{
	width:100%;
}
.png-ttl img{
	width:100%;
	height:auto;
}
.png-ttl{
    display:block;
}
.inlinesvg .png-ttl{
	display:none;
}

.png-ttl .on{
	display:none;
}
.selected .png-ttl .on{
	display:inline;
}
.png-ttl .off{
	display:inline;
}
.selected .png-ttl .off{
	display:none;
}
#blend-wrap{
	padding-top:80px;
	position:relative;
}
#blend-wrap.container{
	max-width:1680px;
}

.blend-header{
	min-height:130px;
	position:relative;
	padding-bottom:25px;
}
.blend-header .step-icon{
	width:80px;
	height:80px;
	position:absolute;
	left:0px;
	top:20px;
}
.blend-header .step-icon img{
	width:100%;
	height:auto;
}
.blend-header .ttl{
	font-size:26px;
	font-size:2.6rem;
	font-weight:500;
	line-height:1.5;
	text-align:center;
	padding-top:40px;
	padding-bottom:10px;
	letter-spacing:0.01em;
}
.page-blend .blend-header .ttl{
}
.blend-header .caption{
	font-size:15px;
	font-size:1.5rem;
	font-weight:500;
	text-align:center;
	letter-spacing:0.05em;
}
.blend-header .caption .cap-icon{
	width:20px;
	height:auto;
	margin-right:5px;
}
.blend-body{
	padding-bottom:35px;
}
.blend-body .oil-list{
	margin-left:-15px;
	margin-right:-15px;
}
.blend-body .oil-list li{
	width: 16.66666666666667%;
	float: left;
	position: relative;
	padding:0px 15px 28px 15px;
}

.blend-body .oil-list li .inner{
	width: 100%;
	background: #FFF;
	position: relative;
	text-align: center;
	cursor: pointer!important;
}
.blend-body .oil-list li .inner .thumb img{
	width: 100%;
	height:auto;
}
.blend-body .oil-list li .inner .name{
	line-height: 1;
	border-top:solid 1px #84826F;
	text-align:center;
	padding: 17px 0 16px 0;
	-webkit-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}
.blend-body .oil-list li.oil.selected .name{
	background-color: #AAA999;
}
.blend-body .oil-list li .inner .name img{
	max-width:100%;
	height:auto;
}
.blend-body .oil-list li .inner .name .svg-ttl{
	max-width:100%;
	/*height:auto;*/
    max-height: 35px;
	fill: #84826f;
	-webkit-transition:fill 0.3s ease;
	transition:fill 0.3s ease;
}
.blend-body .oil-list li.oil.selected .inner .name .svg-ttl ,
.blend-body .oil-list li.oil.selected .inner:hover .name .svg-ttl{
	fill: #FFF!important;
}
.blend-body .oil-list li .info{
	width: 100%;
	border-top:solid 1px #84826F;
	border-bottom:solid 1px #84826F;
}
.blend-body .oil-list li .info a{
	width: 100%;
	height: 28px;
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 28px;
	display: block;
	background-color: #FFF;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
.blend-body .oil-list li .info a:hover{
	color:#FFF;
	background-color:#AAA999;
}
.blend-body .oil-list li .info img{
	width:100%;
	height:auto;
}

.blend-body .oil-list li .inner:hover {
}
.blend-body .oil-list li.selected .inner{
}
.blend-body .oil-list li.selected .inner .icon{
	color:#FFF;
}
/*
.blend-body .oil-list li .inner:hover .name , .blend-body .oil-list li.selected .inner .name,
.blend-body .oil-list li .inner:hover .name span , .blend-body .oil-list li.selected .inner .name span,
.blend-body .oil-list li .inner:hover .icon , .blend-body .oil-list li.selected .inner .icon{
	color:#FFF;
}
*/

.blend-body .oil-list li.inactive .inner{
	opacity:0.3;
	pointer-events: none;
}

.blend-body .blend-mixer {
	/*margin: 0 0 30px;*/
	margin:0;
	letter-spacing: -.40em;
	text-align:center;
}
.blend-body .blend-mixer li.box{
	width: 20%;
	/*float: left;*/
	display: inline-block;
	letter-spacing: normal;
	position: relative;
	padding: 0px 35px 20px;
}
.blend-body .blend-mixer li.box .meter{ 
	padding:25px 0;
}
.blend-body .blend-mixer li.box .circles-wrp{
	font-family: 'Roboto' ,sans-serif;
	font-weight: 500;
}
.blend-body .blend-mixer li.box svg{
}
.blend-body .blend-mixer li.box .circles-valueStroke{ 
	/*
	-webkit-transition: all .8s ease;
	transition: all .8s ease;
	*/
}
.blend-body .blend-mixer li.box .circles-maxValueStroke{
	stroke:#84826F!important;
	stroke-width: 1px;
}
.blend-body .blend-mixer li .inner{
	width: 100%;
	background: #FFF;
	position: relative;
	text-align: center;
	border-radius: 10px;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
	padding: 0px 0px 30px;
}

.blend-body .blend-mixer li .inner .name{
	line-height: 1;
	border-top:solid 1px #84826F;
	text-align:center;
	padding: 17px 0 16px 0;
	-webkit-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}
.blend-body .blend-mixer li .inner .name .svg-ttl{
	max-width:100%;
	height:auto;
	fill: #84826f;
	-webkit-transition:fill 0.3s ease;
	transition:fill 0.3s ease;
}
.blend-body .blend-mixer li .inner .control{
	border-top:1px solid #84826f;
	border-bottom:1px solid #84826f;
}
.blend-body .blend-mixer li .inner .control:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.blend-body .blend-mixer li .inner .control li{
	width:50%;
	float:left;
}
.blend-body .blend-mixer li .inner .control li a{
	width:100%;
	height:70px;
	font-size:40px;
	font-size:4rem;
	color:#84826F;
	display:block;
	line-height:70px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
}
.blend-body .blend-mixer li .inner .control li a:hover{
	color:#FFF;
	background-color:#AAA999;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.blend-body .blend-mixer li .inner .control li:first-child a{
	border-right: solid 1px #84826F;
}
.blend-body .blend-mixer li .inner .control li:last-child a{
}
.blend-graph{
	/*padding:0 30px 60px;*/
	padding:0 30px 30px;
}
 .blend-graph .scale {
	padding-bottom:4px;
}
 .blend-graph .scale li{
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 500;
	display: block;
	width: 33.3333333333%;
	letter-spacing: 0.05em;
	float: left;
}
 .blend-graph .scale li.zero{
	text-align:left;
}
 .blend-graph .scale li.half{
	text-align:center;
}
 .blend-graph .scale li.full{
	text-align:right;
}

.blend-graph .graph-box {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.blend-graph .graph-box li {
	height:70px;
	padding:8px;
	font-size: 12px;
	font-size: 1.2rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color:#FFF;
	text-align:center;
	vertical-align:middle;
	letter-spacing:0.05em;
	border-left: 2px solid #FFF;
	border-right: 2px solid #FFF;
	/*float:left;*/
	display: table-cell;
	overflow:hidden;
	transition: all 0.6s cubic-bezier(0.74, 0, 0.32, 1);
	-webkit-transition: all 0.6s cubic-bezier(0.74, 0, 0.32, 1);
}
.blend-graph .graph-box li:first-child {
	border-left: none;
}
.blend-graph .graph-box li:last-child {
	border-right: none;
}
 .blend-graph .graph-box li p {
	 height:1.8em;
	 overflow:hidden;
}
.blend-footer{
	padding-bottom:70px;
	position:relative;
}
.page-blend .blend-footer{
	margin:0 35px;
}
.blend-footer .btn-next{
	max-width:33.33333333333333%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding:0 15px;
}
.blend-footer .btn-next a{
	width:100%;
	height:70px;
	font-size:22px;
	font-size:2.2rem;
	font-weight:700;
	display:block;
	text-align:center;
	line-height:70px;
	border-top:solid 1px #84826F;
	border-bottom:solid 1px #84826F;
	pointer-events: none;
	-webkit-transition: all 0.3s ease;
	transition:all 0.3s ease;
	opacity:0.2;
}
.blend-footer .btn-next.active a{
	pointer-events: auto;
	opacity:1;
}
.blend-footer .btn-next.active a span{
	color:#FFF;
}
.blend-footer .btn-next.active a:hover{
	color:#FFF;
	background-color:#AAA999;
}
.blend-footer .blend-navi{
	position:absolute;
	left:0;
	top:0;
}
.blend-footer .blend-navi li{
	width:140px;
	float:left;
	padding-right:5px;
}
.blend-footer .blend-navi li a {
	width:140px;
	font-size:14px;
	font-size:1.4rem;
	font-weight:500;
	height:70px;
	line-height:70px;
	display: block;
	padding-left:30px;
	border-top:#84826F solid 1px;
	border-bottom:#84826F solid 1px;
	position:relative;
	text-align:center;
	background-color: #FFF;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	float:right;
}
.blend-footer .blend-navi li a .icon {
	font-size:60px;
	font-size:6.0rem;
	position:absolute;
	left:0px;
}
.blend-footer .blend-navi li a:hover {
	color: #FFF;
	background-color: #AAA999;
}
.page-finish .container,
.page-order .container {
	max-width:1080px;
	text-align:center;
}
.page-finish .sec-ttl,
.page-order .sec-ttl {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 500;
	border-bottom:#84826F solid 1px;
	margin: 0 auto  50px;
	text-align: center;
	padding: 0px 40px 18px;
	letter-spacing:0.05em;
}
#sec-finish{
	min-height:680px;
	padding-top: 80px;
	padding-bottom: 120px;
	text-align: center;
	position: relative;
	background: url(../images/blend/vs.jpg) no-repeat center center;
	background-size:cover;
}

#sec-finish .ttl{
	font-size:32px;
	font-size:3.2rem;
	font-weight:500;
	line-height:1.2;
	letter-spacing:0.05em;
	margin-left:0.025em;
	padding:120px 0 25px;
}
#sec-finish .txt{
	font-size:15px;
	font-size:1.5rem;
	font-weight:500;
	line-height:1.8;
	letter-spacing:0.05em;
	margin-left:0.025em;
}
#sec-finish-nav{
	padding-top:30px;
	position:relative;
	z-index:400;
}
#sec-finish-nav .page-nav{
	padding-top:40px;
}
#sec-finish-nav .page-nav.row{
	margin-left:-10px;
	margin-right:-10px;
}
#sec-finish-nav .page-nav li{
	padding:0 10px;
}
#sec-finish-nav .page-nav li a{
	font-size:15px;
	font-size:1.5rem;
	font-weight:500;
	background-color: #FFF;
	height: 90px;
	line-height:1.3;
	padding-top:24px;
	text-align: center;
	display: block;
	border-top: 1px solid #84826F;
	border-bottom: 1px solid #84826F;
	position:relative;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
#sec-finish-nav .page-nav li a .icon{
	font-size:30px;
	font-size:3.0em;
	line-height:1em;
	display:block;
}
#sec-finish-nav .page-nav li a:hover {
	color: #FFF;
	background-color: #AAA999;
}

#sec-result,
#sec-qr,
#sec-buy{
	margin-top:-60px;
	padding-top:120px;
}

#sec-result {
	position:relative;
	padding-bottom:60px;
	border-bottom: 1px solid #84826F;
	z-index:300;
}
#sec-result .sec-ttl {
	margin-top:20px;
}
#sec-result .ttl {
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: 500;
	padding-bottom: 10px;
	text-align: center;
	border-bottom:#84826F solid 1px;
}
#sec-result .recipe  {
	padding-bottom:60px;
}
#sec-result .recipe .recipe-list {
	margin: 0px auto ;
	padding-top:20px;
	padding-bottom:20px;
}

#sec-result .recipe .recipe-list li {
	width:100%;
	border-bottom: 1px solid #84826F;
	margin-top:10px;
	padding:15px 0px 15px 80px;
	vertical-align:bottom;
	position:relative;
}
#sec-result .recipe .recipe-list li:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
#sec-result .recipe .recipe-list .name {
	font-size: 15px;
	font-size: 1.5rem;
	font-weight:500;
	float:left;
}
#sec-result .recipe .recipe-list .value {
	font-size: 15px;
	font-size: 1.5rem;
	font-weight:500;
	float:right;
}
#sec-result .recipe .recipe-list .name:before{
	background: #74E4F2;
	height: 30px;
	width: 30px;
	display: inline-block;
	content: "";
	margin-right:8px;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-15px;
}
#sec-result .recipe .blend-graph {
	padding:0;
}
#sec-result .recipe .blend-graph .scale li {
	font-size: 15px;
	font-size: 1.5rem;
}
#sec-result .recipe .blend-graph .graph-box  li {
	height:40px;
}

#sec-result .comment {
	text-align:center;
	padding-bottom:60px;
}
#sec-result .comment .wrap {
}
#sec-result .comment .type-list  {
	padding: 60px 0 50px;
}
#sec-result .comment .type-list li {
	width:80px;
	margin-left: 30px;
	margin-right: 30px;
	display:inline-block;
}
#sec-result .comment .type-list li img{
	width:100%;
	height:auto;
	padding-bottom:10px;
}
#sec-result .comment .type-list li span{
	font-size:13px;
	font-weight:500;
	display:block;
}
#sec-result .comment h4{
	width: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.4;
	border-top: 1px solid #84826F;
	border-bottom: 1px solid #84826F;
	text-align: center;
	padding: 20px;
}
#sec-result .comment p{
	width: 100%;
	font-size: 14px;
	font-size: 1.4rem;
	text-align:left;
	font-weight: 500;
	padding:30px 25px;
}
#sec-result .material {
	padding-bottom:20px;
}
#sec-result .material .material-list  {
	padding: 40px 30px 0;
}
#sec-result .material .material-list .mat {
	padding-bottom:60px;
	text-align:center;	
}
#sec-result .material .material-list .mat .inner {
	/*border:2px solid #F3F3F3;
	padding:28px 35px;*/
	padding:0;
}
#sec-result .material .material-list .ttl-area {
	padding-bottom:15px;
	margin-bottom:16px;
	border-bottom: 2px solid #84826F;
}
#sec-result .material .material-list .txt01 {
	font-size: 18px;
	font-size: 1.8rem;
	line-height:1.6;
	font-weight: 500;
}
#sec-result .material .material-list .txt01 span {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height:1.2;
	letter-spacing:0.05em;
	display:block;
	margin-top:2px;
}
#sec-result .material .material-list .txt02 {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height:1.6;
}
#sec-result .material .material-list .txt03 {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height:1.6;
	margin-bottom: 20px;
}
#sec-result .material .material-list .txt04 {
	border-bottom: 1px solid #84826F;
}
#sec-result .material .material-list .txt04 li {
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	padding: 5px;
	border-top: 1px solid #84826F;
}
#sec-result .material .material-list .txt04 span {font-weight: 500;}
#sec-result .material .material-list .txt05 {
	font-size: 10px;
	font-weight: 500;
	padding-bottom: 10px;
}
#sec-qr{
	position:relative;
	padding-bottom:140px;
	border-bottom: 1px solid #84826F;
	z-index:200;
}
#sec-qr .container{
	max-width:760px;
}
#sec-qr .qr{
	width:180px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:40px;
	text-align:center;
}
#sec-qr .qr img{
	width:100%;
	height:auto;
	padding:auto;
}
#sec-qr .lead,
#sec-buy .lead{
	font-size: 15px;
	font-size: 1.5rem;
	text-align:center;
	font-weight:500;
	letter-spacing:0.05em;
	margin-bottom:50px;
}
#sec-qr .btn,
#sec-buy .btn{
	max-width:760px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	border-top: 1px solid #84826F;
	border-bottom: 1px solid #84826F;
}
#sec-qr .btn.btn-shop{
	border-top: none;
}
#sec-qr .btn a,
#sec-buy .btn a{
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	display: block;
	position: relative;
	height: 70px;
	line-height:70px;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#sec-qr .btn.btn-qr a{
	height: 120px;
	line-height:120px;
}
#sec-buy .btn a{
	font-size: 16px;
	font-size: 1.6rem;
	height: 60px;
	line-height:60px;
	text-align:left;
	padding-left:5px;
}
#sec-qr .btn a:hover,
#sec-buy .btn a:hover{
	color: #FFF;
	background: #AAA999;
}
#sec-qr .btn a span,
#sec-buy .btn a span{
	position:absolute;
	font-weight:normal;
}
#sec-qr .btn a .keitai {
	width:56px;
	left:120px;
	top:15px;
}
#sec-qr .btn a .keitai #i_iphone {
	width:100%;
	height:auto;
	fill:#84826F;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#sec-qr .btn a:hover .keitai #i_iphone {
	fill:#FFF;
}
#sec-qr .btn a .arrow,
#sec-buy .btn a .arrow {
	font-size:40px;
	font-size:4.0rem;
	right:-15px;
}
#sec-buy{
	position:relative;
	padding-bottom:0px;
	z-index:100;
}
#sec-buy .sec-ttl{
	margin-bottom:55px;
}
#sec-buy h4{
	font-size: 16px;
	font-size: 1.6rem;
	font-weight:500;
	letter-spacing:0.1em;
	padding-bottom:10px;
}
#sec-buy .aroma-code{
	font-size: 56px;
	font-size: 5.6rem;
	font-weight:500;
	line-height:1em;
	margin-left:auto;
	margin-right:auto;
	letter-spacing:0.05em;
	padding-bottom:70px;
	margin: 0px auto 40px;
	border-bottom: 1px solid #84826F;
}
#sec-buy .buy-box{
	border-right: 1px solid #84826F;
	margin-bottom:20px;
	text-align:left;
}
#sec-buy .buy-box:last-child{
	border:none;
	margin-bottom:0;
}
#sec-buy .buy-box .inner{
	padding:10px 15px 15px;
}
#sec-buy .buy-box:first-child .inner{
	padding-left:0;
}
#sec-buy .buy-box:last-child .inner{
	padding-right:0;
}
#sec-buy .buy-box .inner h3{
	font-size: 19px;
	font-size: 1.9rem;
	font-weight:500;
	line-height:1.4;
	padding-bottom:26px;
}
#sec-buy .buy-box .inner h3 .free{
	margin-left:10px;
}
#sec-buy .buy-box .inner p{
	font-size: 14px;
	font-size: 1.4rem;
	font-weight:500;
	padding-bottom:32px;
}

#sec-buy .buy-box .inner p span{
	font-weight:700;
}
#sec-order {
	padding-top:60px;
	padding-bottom:60px;
	position:relative;
}
#sec-order .container{
	max-width:760px;
}
#sec-order .sec-ttl{
	margin-bottom:40px;
}
#sec-order .order-form  {
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}
#sec-order h4 {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight:500;
	text-align:left;
	padding-bottom:10px;
	letter-spacing:0.05em;
}
#sec-order .order-form dl {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	border-bottom: solid 1px #84826F;
}

#sec-order .order-form dl:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
#sec-order .order-form dt {
	width: 25%;
	float: left;
	padding-top:14px;
	padding-bottom:14px;
	border-top: solid 1px #84826F;
	line-height:35px;
	letter-spacing:0.05em;
	text-align:left;
	clear:both;
}
#sec-order .order-form dd {
	width:75%;
	float: left;
	padding-top:14px;
	padding-bottom:14px;
	line-height:35px;
	border-top: solid 1px #84826F;
	letter-spacing:0.05em;
	text-align:left;
	
}
#sec-order .order-form dd p {
	font-size: 13px;
	font-size: 1.3rem;
	line-height:1.6;
}
#sec-order .order-form dd .row {
	margin:0 -15px;
}
#sec-order .order-form dd .row .col-sm-12 {
	padding:0 15px;
	margin-bottom:15px;
}
#sec-order .order-form dd .row .col-sm-6 {
	padding:0 15px;
	margin-bottom:15px;
}
#sec-order .order-form dd .notice {
	font-size:12px;
	font-size:1.2rem;
	color:#C76987;
	display:block;
}
#sec-order .order-form dd .type-tx{
	padding-right:20px;
}
#sec-order  .order-form .formitem-1 {
	width: 100%;
	height: 35px;
	padding: 0px 5px;
	background:#FFF;
	/*border:none;*/
	border:#AAA999 1px solid;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 500;
	color:#84826F;
}
#sec-order  .order-form .formitem-2 {
	width: 90px;
	height: 35px;
	padding: 0px 5px;
	background:#FFF;
	border:#AAA999 1px solid;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 500;
	color:#84826F;
}
#sec-order  .order-form .formitem-3 {
	width: 100%;
	height: 5.4em;
	padding: 0px 5px;
	background:#FFF;
	border:#AAA999 1px solid;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 500;
	color:#84826F;
}
#sec-order  .order-form .formitem-select {
	width: 100%;
	padding: 8px;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: 500;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:#AAA999 1px solid;
	border-radius:0;
	background: transparent;
	color:#84826F;
	position:relative;
	z-index:1;
	cursor:pointer;
}
#sec-order  .order-form .select-box {
	position:relative;
}
#sec-order  .order-form .select-icon {
	font-size: 26px;
	position:absolute;
	right:2px;
	top:0;
	z-index:0;
}



#sec-order  .order-form .error .formitem-1,
#sec-order  .order-form .error .formitem-2,
#sec-order  .order-form .error .formitem-select {
	border:#C76987 1px solid;
}
#sec-order  .order-form .important {
	font-size:13px;
	font-size:1.3rem;
	text-align:left;
	padding:10px 0;
}
#sec-order .order-submit {
	width: 100%;
	max-width:680px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	margin-top:30px;
}
#sec-order .order-submit li {
	position:relative;
}
#sec-order .formitem-submit {
	width: 100%;
	height:70px;
	line-height:68px;
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: 500;
	display: block;
	position: relative;
	background-color:#FFF;
	letter-spacing:0.1em;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	cursor: pointer;
	border-top:solid 1px #84826F;
	border-bottom:solid 1px #84826F;
	border-left:none;
	border-right:none;
	color: #84826F;
	font-family:'Roboto', 'Noto', YuGothic, 'Yu Gothic', '游ゴシック体', '游ゴシック', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#sec-order .formitem-submit:hover {
	color:#FFF;
	background-color:#AAA999;
}
#sec-order .order-submit .arrow {
	font-size:40px;
	font-size:4.0rem;
	position:absolute;
	top:0;
	line-height:70px;
	color: #84826F;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#sec-order .order-submit .icon-arrrow_right {
	right:10px;
}
#sec-order .order-submit .icon-arrrow_left {
	left:10px;
}
#sec-order .order-submit:hover .arrow {
	color: #FFF;
}
input:focus {
outline: solid 1px #C9C8B5;
}
textarea:focus {
outline: solid 1px #C9C8B5;
}
select:focus {
outline: solid 1px #C9C8B5;
}
#sec-order  .order-form .formitem-1.ondes,
#sec-order  .order-form .formitem-2.ondes,
#sec-order  .order-form .formitem-3.ondes{color:#C9C8B5;}
input[type=radio], input[type=checkbox] {
  display: none;
}
#sec-order .order-comp{
	padding:40px 0 80px;
	text-align:center;
}
#sec-order .order-comp h3{
	font-size:30px;
	font-size:3.0rem;
	font-weight:500;
	margin-bottom:30px;
}
#sec-order .order-comp p{
	font-size:14px;
	font-size:1.4rem;
	font-weight:500;
	line-height:2.0;
}
#sec-order .order-comp dl{
	padding:50px 0;
	text-align:center;
	font-size:13px;
	font-size:1.3rem;
}
#sec-order .order-comp dl dt{
	font-weight:700;
	margin-bottom:10px;
}

.radio, .checkbox {
  position: relative;
  display: inline-block;
  margin: 0 20px 0px 0;
  padding-left: 27px;
  vertical-align: middle;
  cursor: pointer;
}
.radio:hover:after, .checkbox:hover:after {
  background:#AAA999;
}
.radio:after, .checkbox:after {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  top: 50%;
  left: 0px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 1px solid #84826F;
  border-radius: 50%;
  content: '';
}

input[type=radio]:checked + .radio:after,
input[type=checkbox]:checked + .checkbox:after {
	background:#84826F;
}
input[type="submit"]{
	-webkit-appearance: none; 
	border-radius: 0
}
input[type="button"]{
	-webkit-appearance: none; 
	border-radius: 0
}
#sec-sns {
	width: 100%;
	max-width:680px;
	margin-left:auto;
	margin-right:auto;
	border-bottom:solid 1px #84826F;
	position:relative;
	padding-bottom:50px;
}
#sec-sns h3 {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 500;
	padding-top:40px;
	padding-bottom:20px;
	letter-spacing:0.05em;
}
#sec-sns .sns .sns {
	text-align:center;
}
#sec-sns .sns li {
	width:80px;
	height:80px;
	margin:0px 10px;
	font-size: 58px;
	font-size: 5.8rem;
	display:inline-block;
}
#sec-sns .sns li a {
	color:#84826F;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#sec-sns .sns li a:hover {
	opacity:0.5;
}
#sec-sns .sns li.tw a {
}
#sec-sns .sns li.fb a {
}
.page-finish #sec-try {
	padding-top:80px;
	padding-bottom:80px;
}
.page-finish .try-btn a .txt {
	font-size: 28px;
	font-size: 2.8rem;
}
.page-order #sec-order{
	padding-top:120px;
}



/******************************************************************************

  MODAL

*******************************************************************************/
.remodal .img-box {
	width: 100%;
	padding-top: 20px;
}
.remodal .img-box img{
	width: 100%;
	height: auto;
}
.remodal .txt-box {
	padding: 20px 50px 25px;
}
.remodal .ttl-area {
	padding-bottom: 20px;
	border-bottom: 1px solid #84826F;
	margin-bottom: 30px;
	position: relative;
}
.remodal .ttl-area .type {
	width:60px;
	position: absolute;
	bottom: 16px;
	right: 0;
	text-align:center;
}
.remodal .ttl-area .type img {
	width:50px;
	height:auto;
	padding-bottom:7px;
}
.remodal .ttl-area .type span {
	font-weight:700;
	display:block;
}

.remodal .txt-box .txt01 {
	font-size: 24px;
	line-height:1.2;
	font-weight: 500;
}
.remodal .txt-box .txt01 span {
	font-size: 16px;
	font-weight: 700;
	line-height:1.2;
	letter-spacing:0.05em;
	margin-top: 7px;
	display:block;
}

.remodal .txt-box .txt02 {
	font-size: 20px;
	font-weight: 500;
	line-height:1.2;
	margin-bottom: 12px;
}
.remodal .txt-box .txt03 {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 24px;
	letter-spacing:0.1em;
}
.remodal .txt-box .txt04 {
	/*width: 420px;*/
	font-size: 11px;
	font-weight: 500;
	margin: 0 auto 10px;
}
.remodal .txt-box .txt04 li {
	display:inline-block;
	padding-left: 8px;
	padding-right:8px;
	border-right: #84826F solid 1px;
}
.remodal .txt-box .txt04 span {font-weight: 700;}
.remodal .txt-box .txt05 {
	font-size: 10px;
	font-weight: 400;
	padding-bottom: 10px;
}

.remodal .txt-box .txt06 {
	font-size: 12px;
	font-weight: 500;
	line-height:1.6;
	margin-bottom: 24px;
	letter-spacing:0.05em;

}
.remodal .send-mail {
	padding: 60px;
}
.remodal .send-mail p {
	text-align:center;
	font-size: 16px;
	font-size: 1.6em;
	font-weight: 500;
	padding-bottom:25px;
}
.remodal .send-mail .address {
	padding-bottom:20px;
}
.remodal .send-mail input.adress-input {
	width: 100%;
	height: 60px;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 60px;
	padding: 0px 20px!important;
	margin: 0px!important;
	outline: 0;
	letter-spacing: 0.05em;
	vertical-align: top;
	border: 1px solid #DDD;
}
.remodal .send-mail input.adress-submit {
	width: 100%;
	height: 70px;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 60px;
	letter-spacing:0.3em;
	color:#FFF;
	border-radius:5px;
	text-align: center;
	outline: 0;
	border: none;
	cursor: pointer;
	z-index: 2;
	background:#C0C0C0;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

.remodal .send-mail input.adress-submit:hover {
	background: #AAA999;
}

.remodal .send-mail #send_mail_msg {
	font-size: 14px;
	font-size: 1.4em;
	font-weight: 500;
	margin-bottom:10px;
	display:block;
	border-radius:10px;
	padding:8px;
}




/******************************************************************************

 * RESPONSIVE

*******************************************************************************/

@media (max-width: 1599px) {

}
@media (max-width: 1199px) {
	.blend-body .blend-mixer{
		margin-left:10px;
		margin-right:10px;
	}
	.blend-body .blend-mixer li.box{
		padding-left:20px;
		padding-right:20px;
	}
	.oil-list .inner:hover .name .svg-ttl {fill: #84826f!important;}
}
 @media (max-width: 979px) {
	/******************************************************************************
	
	  BLEND
	
	*******************************************************************************/
	#blend-wrap{
		padding-top:60px;
	}
	.blend-header{
		min-height:100px;	
	}
	.blend-header .ttl{
		font-size:2.0rem;
	}
	.blend-header .caption{
		font-size:1.3rem;
	}
	.blend-body .oil-list li{
		width: 25%;
	}
	.blend-body .blend-mixer li.box{
		width: 33.333333333%;
	}
	.blend-footer .btn-next{
		max-width:50%;
	}
	.blend-footer .btn-next a{
		font-size:1.8rem;
	}
	.blend-body .blend-mixer li.box{
		padding: 0px 25px 0px;
	}
	.blend-body .blend-mixer li.box .meter{ 
		padding:15px 0;
	}
	.blend-graph{
		padding:0 20px 40px;
	}
	.page-blend .blend-footer{
		margin:0 25px;
	}
	/* ダブルタップ処理   */
	.blend-body .oil-list li .info a:hover{
		color:#FFF;
		background-color:#AAA999;
	}
	.blend-body .oil-list li .info a:active{
		color:#FFF;
		background-color:#AAA999;
	}
	.blend-body .blend-mixer li .inner .control li a:hover{
		color:#444;
		background-color:#F0F1F2;
	}
	
	#sec-finish{
		min-height:540px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.page-finish .sec-ttl{
		margin-bottom:40px;
		padding-bottom: 12px;
	}
	#sec-finish .ttl{
		padding:100px 0 20px;
	}
	#sec-finish-nav{
		padding-top:0px;
	}
	#sec-result,
	#sec-qr,
	#sec-buy{
		margin-top:-60px;
		padding-top:110px;
	}
	#sec-result {
		padding-bottom:50px;
	}
	#sec-result .ttl {
		font-size: 1.8rem;
	}
	#sec-result .recipe  {
		padding-bottom:50px;
	}
	#sec-result .recipe .recipe-list li {
		margin-top:5px;
		padding:15px 0px 15px 40px;
	}
	#sec-result .recipe .recipe-list .name {
		font-size: 1.4rem;
		font-weight:500;
		float:left;
	}
	#sec-result .recipe .recipe-list .value {
		font-size: 1.4rem;
	}
	#sec-result .recipe .recipe-list .name:before{
		height: 20px;
		width: 20px;
		margin-top:-10px;
	}
	#sec-result .recipe .blend-graph .scale li {
		font-size: 14px;
		font-size: 1.4rem;
	}
	#sec-result .comment {
		padding-bottom:50px;
	}
	#sec-result .comment .type-list  {
		padding: 50px 0 40px;
	}
	#sec-result .comment .type-list li span{
		font-size:1.2rem;
	}
	#sec-result .comment h4{
		font-size: 1.5rem;
	}
	#sec-result .comment p{
		font-size: 1.3rem;
		padding:20px 15px;
	}
	#sec-result .material .material-list .mat {
		padding-bottom:50px;
	}
	#sec-result .material .material-list .txt01 {
		font-size: 1.6rem;
	}
	#sec-result .material .material-list .txt01 span {
		font-size: 1.3rem;
	}
	#sec-result .material .material-list .txt02 {
		font-size: 1.3rem;
	}
	#sec-result .material .material-list .txt03 {
		font-size: 1.3rem;
	}
	#sec-qr{
		padding-bottom:120px;
	}
	#sec-qr .container{
		max-width:660px;
	}
	#sec-qr .qr{
		width:140px;
		margin-bottom:40px;
	}
	#sec-qr .lead,
	#sec-buy .lead{
		margin-bottom:40px;
	}
	#sec-qr .btn a,
	#sec-buy .btn a{
		font-size: 18px;
		font-size: 1.8rem;
		height: 60px;
		line-height:60px;
	}
	#sec-qr .btn.btn-qr a{
		height: 90px;
		line-height:90px;
	}
	#sec-buy .btn a{
		font-size: 1.3rem;
		height: 50px;
		line-height:50px;
	}
	#sec-qr .btn a .keitai {
		width:44px;
		left:100px;
		top:10px;
	}
	#sec-qr .btn a .arrow {
		font-size:3.6rem;
	}
	#sec-buy .btn a .arrow {
		font-size:2.8rem;
	}
	#sec-buy .sec-ttl{
		margin-bottom:35px;
	}
	#sec-buy h4{
		font-size: 1.4rem;
		padding-bottom:10px;
	}
	#sec-buy .aroma-code{
		font-size: 5rem;
		padding-bottom:40px;
	}
	#sec-buy .buy-box .inner{
		padding:10px 0px 15px;
	}
	#sec-buy .buy-box .inner h3{
		font-size: 1.8rem;
		padding-bottom:22px;
	}
	#sec-buy .buy-box .inner h3 .free{
		margin-left:0px;
		margin-top:5px;
		display:block;
	}
	#sec-buy .buy-box .inner p{
		font-size: 1.3rem;
		padding-bottom:28px;
	}
	#sec-order {
		padding-bottom:50px;
	}
	#sec-order .container{
		max-width:660px;
	}
	#sec-sns {
		max-width:600px;
		padding-bottom:0px;
		border:none;
	}
	#sec-sns h3{
		padding-top:20px;
		padding-bottom:0;
		
	}
	.page-finish #sec-try {
		padding-top:60px;
		padding-bottom:60px;
	}
}
 @media (max-width: 767px) {
	 .blend-header{
		min-height:auto;
		padding-bottom:30px;
	}
	.page-blend .blend-header{
		padding-bottom:10px;
	}
	.blend-header .step-icon{
		width:80px;
		height:80px;
		position:static;
		margin-left:auto;
		margin-right:auto;
		margin:20px auto 0px;
	}
	.blend-header .ttl{
		font-size:1.8rem;
		padding-top:20px;
	}
	.page-blend .blend-header .ttl{
		padding-top:20px;
	}
	.blend-header .caption{
		font-size:1.0rem;
	}
	.blend-body{
		padding-bottom:10px;
	}
	.blend-body .oil-list{
		margin-left:-10px;
		margin-right:-10px;
	}
	.blend-body .oil-list li{
		width: 50%;
		padding:0px 10px 20px 10px;
	}
	.blend-body .oil-list li .inner{
	}
	.blend-body .oil-list li .inner .name{
		padding:11px 0 10px 0;
	}
	.blend-body .oil-list li .inner .name span{
	}
	.blend-body .oil-list li .info a {
		height:24px;
		font-size: 1.1rem;
		line-height:2.4;
	}
	.blend-body .blend-mixer{
		margin:0 -10px 20px;
	}
	.blend-body .blend-mixer li.box{
		width: 50%;
		padding: 0px 10px 20px;
		float: left;
		display:block;
	}
	.blend-body .blend-mixer li.box .meter{ 
		padding:5px 0;
	}
	.blend-body .blend-mixer li .inner{
		padding: 0px 0px 0px;
	}
	.blend-body .blend-mixer li .inner .control li{
		height:50px;
	}
	.blend-body .blend-mixer li .inner .control li a{
		height:50px;
		font-size:2rem;
		line-height:50px;
	}
	.blend-body .blend-graph{
		padding:0 0 20px
	}
	.blend-graph .scale li{
		font-size: 1.3rem;
	}
	.blend-graph .graph-box li {
		height:50px;
		padding:8px;
		font-size: 1rem;
		border-left: 1px solid #FFF;
		border-right: 1px solid #FFF;
	}
	.blend-footer{
		padding-bottom:40px;
	}
	.page-blend .blend-footer{
		margin:0;
	}
	.blend-footer .btn-next{
		max-width:100%;
		margin: 10px 0 0px;
		padding:0;
	}
	.blend-footer .btn-next a{
		width:100%;
		height:50px;
		font-size:1.5rem;
		line-height:50px;
	}
	.blend-footer .btn-next a span{
		font-size:13px;
		font-size:1.3rem;
	}
	.blend-footer .blend-navi{
		position:static;
	}
	.blend-footer .blend-navi li{
		width:100%;
		float:none;
		padding-right:0px;
	}
	.blend-footer .blend-navi li a{
		width:100%;
		height:50px;
		line-height:50px;
		padding:0;
		border-top:none;
	}
	.blend-footer .blend-navi li a .icon{
		font-size:3.0rem;
	}
	
	#sec-finish{
		min-height:440px;
		padding-top: 60px;
	}
	.page-finish .sec-ttl{
		font-size: 1.8em;
		margin-bottom:20px;
		line-height:1.5;
		padding:0px 0px 12px;
	}
	#sec-finish .ttl{
		font-size:1.7rem;
		padding:70px 0 20px;
	}
	#sec-finish .txt{
		font-size:1.1rem;
	}
	#sec-finish-nav .page-nav{
		padding-top:20px;
	}
	#sec-finish-nav .page-nav li{
		padding:0 5px;
	}
	#sec-finish-nav .page-nav.row{
		margin-left:-5px;
		margin-right:-5px;
	}
	#sec-finish-nav .page-nav li a{
		font-size:1.1rem;
		height: 90px;
		padding-top:25px;
	}
	#sec-finish-nav .page-nav li a .icon{
		font-size:2.6em;
	}
	#sec-result,
	#sec-qr,
	#sec-buy{
		margin-top:-60px;
		padding-top:100px;
	}
	#sec-result,
	#sec-qr{
		border-bottom-width: 2px;
	}
	#sec-result {
		padding-bottom:50px;
	}
	#sec-result .ttl {
		font-size: 1.6rem;
	}
	#sec-result .recipe  {
		padding-bottom:40px;
	}
	#sec-result .recipe .recipe-list {
		padding-top:0;
		padding-bottom:10px;
	}
	#sec-result .recipe .recipe-list li {
		margin-top:0px;
		padding:15px 0px 15px 25px;
	}
	#sec-result .recipe .recipe-list .name {
		font-size: 1.2rem;
	}
	#sec-result .recipe .recipe-list .value {
		font-size: 1.2rem;
	}
	#sec-result .recipe .recipe-list .name:before{
		height: 15px;
		width: 15px;
		margin-top:-10px;
	}
	#sec-result .recipe .blend-graph .scale li {
		font-size: 1.2rem;
	}
	#sec-result .comment {
		padding-bottom:30px;
	}
	#sec-result .comment .type-list  {
		padding: 30px 0 20px;
	}
	#sec-result .comment .type-list li{
		width:70px;
		margin-left:20px;
		margin-right:20px;
	}
	#sec-result .comment .type-list li span{
		font-size:1.2rem;
	}
	#sec-result .comment h4{
		font-size: 1.4rem;
		padding:10px 0;
	}
	#sec-result .comment p{
		padding:10px 0 0;
	}
	#sec-result .material{
		padding-bottom:0px;
	}
	#sec-result .material .material-list{
		padding:20px 10px 0;
	}
	#sec-result .material .material-list .mat {
		padding-bottom:40px;
	}
	#sec-result .material .material-list .ttl-area{
		padding-bottom:10px;
		margin-bottom:10px;
	}
	#sec-result .material .material-list .txt03 {
		margin-bottom:10px;
	}
	#sec-qr{
		padding-bottom:70px;
	}
	
	#sec-qr .qr{
		width:120px;
		margin-bottom:20px;
	}
	#sec-qr .lead,
	#sec-buy .lead{
		font-size:1.3rem;
		margin-bottom:30px;
		text-align:left;
	}
	#sec-qr .btn a,
	#sec-buy .btn a{
		font-size: 1.2rem;
		height: 50px;
		line-height:50px;
	}
	#sec-qr .btn.btn-qr a{
		height: 70px;
		line-height:70px;
	}
	#sec-buy .btn a{
		font-size: 1.2rem;
		height: 50px;
		line-height:50px;
	}
	#sec-qr .btn a .keitai {
		width:32px;
		left:20px;
		top:10px;
	}
	#sec-qr .btn a .arrow {
		font-size:2.8rem;
		right:-10px;
	}
	#sec-buy .btn a .arrow {
		font-size:2.8rem;
		right:-10px;
	}
	#sec-buy .sec-ttl{
		margin-bottom:15px;
	}
	#sec-buy h4{
		font-size: 1.4rem;
		padding-bottom:5px;
	}
	#sec-buy .aroma-code{
		font-size: 4rem;
		padding-bottom:20px;
		margin-bottom:20px;
	}
	#sec-buy .buy-box{
		margin-bottom:15px;
	}
	#sec-buy .buy-box .inner{
		padding:0px;
	}
	#sec-buy .buy-box .inner h3{
		font-size: 1.6rem;
		padding-bottom:12px;
	}
	#sec-buy .buy-box .inner p{
		font-size: 1.2rem;
		padding-bottom:16px;
	}
	#sec-order {
		padding-bottom:40px;
	}
	#sec-order .sec-ttl{
		margin-bottom:15px;
	}
	#sec-order h4{
		font-size:1.4rem;
	}
	#sec-order .order-form dl {
		font-size: 1.3rem;
	}
	#sec-order .order-form dt {
		width: 100%;
		float: none;
		padding-top:14px;
		padding-bottom:4px;
		line-height:1.5;
	}
	#sec-order .order-form dd {
		width: 100%;
		float: none;
		padding-top:0;
		padding-bottom:16px;
		line-height:1.5;
		border-top: none;
	}
	#sec-order .order-form dd .type-tx{
		padding-right:10px;
	}
	#sec-order  .order-form .formitem-1 {
		height: 35px;
		padding: 0px 5px;
		border:solid 1px #C9C8B5;
		font-size: 1.3rem;
	}
	#sec-order  .order-form .important {
		font-size:1.2rem;
	}
	#sec-order .order-submit {
		margin-top:10px;
	}
	#sec-order .formitem-submit {
		width: 100%;
		height:60px;
		line-height:58px;
		font-size: 1.6rem;
		letter-spacing:0.1em;
	}
	#sec-order .order-submit li:nth-child(2) .formitem-submit {
		border-top:none;
	}
	#sec-order .order-submit .arrow {
		font-size:2.8rem;
		line-height:60px;
	}
	#sec-order .order-submit .icon-arrrow_right {
		right:15px;
	}
	#sec-order .order-submit .icon-arrrow_left {
		left:15px;
	}
	#sec-order .order-comp{
		padding:20px 0 50px;
	}
	#sec-order .order-comp h3{
		font-size:2.0rem;
		margin-bottom:20px;
	}
	#sec-order .order-comp p{
		font-size:1.3rem;
	}
	
	radio, .checkbox {
	  margin: 0 12px 0px 0;
	  padding-left: 24px;
	}
	.radio:hover:after, .checkbox:hover:after {
	  background:#FFF;
	}
	#sec-sns h3 {
		font-size: 1.3rem;
		padding-bottom:0px;
	}
	#sec-sns .sns li {
		width:60px;
		height:60px;
		font-size: 4.0rem;
	}
	.page-finish #sec-try {
		padding-top:40px;
		padding-bottom:40px;
	}
	.page-finish .try-btn a .txt {
		font-size: 2rem;
	}

	
	/******************************************************************************
	
	  MODAL
	
	*******************************************************************************/
	.remodal .txt-box {
		padding: 10px 20px 20px;
	}
	.remodal .ttl-area {
		padding-top:10px;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.remodal .ttl-area .type {
		width:50px;
		top: -4px;
	}
	.remodal .ttl-area .type img {
		width:36px;
	}
	.remodal .txt-box .txt01 {
		font-size: 1.8rem;
	}
	.remodal .txt-box .txt01 span {
		font-size: 1.2rem;
	}
	.remodal .txt-box .txt02 {
		font-size: 1.5rem;
		margin-bottom: 15px;
	}
	.remodal .txt-box .txt03 {
		font-size: 1.3rem;
		margin-bottom: 20px;
	}
	.remodal .txt-box .txt04 {
		width: 100%;
		font-size: 10px;
		padding:5px;
	}
	.remodal .txt-box .txt04 li {
		line-height:1.8;
		display:block;
	}
	.remodal .txt-box .txt05 {
		font-size: 10px;
		padding-bottom: 10px;
	}
	.remodal .txt-box .txt06 {
		font-size: 12px;
		margin-bottom: 15px;
	}
	.remodal .send-mail {
		padding: 40px 30px;
	}
	.remodal .send-mail p {
		text-align:center;
		font-size: 1.4em;
		line-height:1.5;
		padding-bottom:25px;
	}
	.remodal .send-mail .address {
		padding-bottom:20px;
	}
	.remodal .send-mail input.adress-input {
		width: 100%;
		height: 60px;
		font-size: 1.6rem;
		line-height: 1.5;
		padding: 0px 15px!important;
		margin: 0px!important;
	}
	.remodal .send-mail input.adress-submit {
		width: 100%;
		height: 60px;
		font-size: 1.8rem;
		line-height: 60px;
		border-radius:5px!important;
	}
	
	.remodal .send-mail input.adress-submit:hover {
		background: #AAA999;
	}

}







/******************************************************************************

  USA

*******************************************************************************/
.us #sec-qr .btn a .keitai {
	width:56px;
	left:60px;
	top:15px;
}
@media (max-width: 979px) {
	.us #sec-qr .btn a .keitai {
		width:44px;
		left:100px;
		top:10px;
	}
}
@media (max-width: 767px) {
	.us #sec-qr .btn a .keitai {
		width:28px;
		left:0px;
		top:12px;
	}
}