@charset "utf-8";

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

/* =================================================================
		rest
================================================================= */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
body {
	font-size:0.8rem;
    line-height:1.5;
	font-family: Verdana, Roboto, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo,  "ＭＳ Ｐゴシック", sans-serif;
}
/*
@media screen and (min-width:640px) { 
	body { font-size:4%;}
}*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
 
nav ul {
    list-style:none;
}
 
blockquote, q {
    quotes:none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
 
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
 
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
 
del {
    text-decoration: line-through;
}
 
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
 
table {
    border-collapse:collapse;
    border-spacing:0;
}
 
/* change border colour to suit your needs */
hr {
    display:block;
    height:10px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
 
input, select {
    vertical-align:middle;
}
ol, ul {
    list-style: none;
}
img {
	vertical-align:bottom;
	font-size:0;
	line-height:0;
	width:100%;
}
/* =================================================================
		layout
================================================================= */
body {
	background-color :#fcffe9;
}
.wrapper{
	margin: 0 auto;
	max-width: 640px;
	box-shadow: 0 0 6px rgba(0,0,0, 0.2)
}
.contents{
	width:100%;
	margin:0 auto;
}
/* cv-area
-------------------- */
.cv {
	background:#F2E7CE;
}
.cv_top {
	margin:-5% 0 0;
}
.cv__set {
	position:relative;
	width:100%;
}
.cv__set_btn {
	position:absolute;
	width:53%;
	top: 73%;
	left:40%;
}
.cv__normal {
	position:relative;
	width:100%;
}
.cv__normal_btn {
	position:absolute;
	width:53%;
	top:30%;
	left:40%;
}
.cv__box {
	position:relative;
	width:100%;
}
.cv__btn {
	position:absolute;
	width:46%;
	top: 0%;
	right:0%;
}
.cv__btn{
    animation-name: conversion--main;
    animation-duration: 6s;
    animation-iteration-count: infinite;
	z-index:10;
}
@keyframes conversion--main{
    from,to{
    transform:scale(1, 1)
  }
  50%{
    transform:scale(1, 1)
  }
  60%{
    transform:scale(.96, .96)
  }
  70%{
    transform:scale(1.04, 1.04)
  } 
  80%{
    transform:scale(0.98, 0.98)
  }
  90%{
    transform:scale(1.02, 1.02)
  }
  100%{
    transform:scale(1, 1)
  }
}
/* =================================================================
		コンテンツ
================================================================= */

/* Happyにダイエットできる3つの理由
-------------------- */
.reason {
	margin:-3% 0 0;
	background:#EFE6D1;
}
.reason__voice {
}
.reason__txt {
	padding:0 4%;
	margin:0 0 4%;
}
.reason__note {
	font-size:0.6rem;
	padding:0 4%;
}
@media screen and (min-width: 480px) {
	.reason__note { font-size:14px;}
}
/* タイプ別ダイエットプラン
-------------------- */
.type__list {
	position:relative;
	width:100%;
}
.type__btn01 {
	position:absolute;
	width:36%;
	top:80.5%;
	left:3%;
}
.type__btn02 {
	position:absolute;
	width:36%;
	top:80.5%;
	right:3%;
}

/* お客様の声
-------------------- */
.voice {
	background:url(https://canhael.net/gold/hapeat/smp/img/hapeat3/bg_reason.png) repeat left top;
	background-size:100% auto;
	-webkit-background-size:100% auto;
	-moz-background-size:100% auto;
	padding:0 0 4%;
}
.voice__note {
	font-size:0.6rem;
	padding:0 4%;
}
@media screen and (min-width: 480px) {
	.voice__note { font-size:14px;}
}
/* よくある質問
-------------------- */
.faq {
	background:url(https://canhael.net/gold/hapeat/smp/img/hapeat3/bg_faq.png) repeat left top;
	background-size:100% auto;
	-webkit-background-size:100% auto;
	-moz-background-size:100% auto;
	padding:4% 4% 8%;
}
.faq__ttl {
	padding:0 0 4%;
}
.faq__txt p {
	padding:4% 0;
}
.faq__list {	
	background:#fff;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.faq__list > li {
	border-bottom:1px solid #ddd;
}
.faq__list > li:last-child {
	border-bottom:none;
}
.faq__box {
	padding:4% 4% 4% 4%;
}
.faq__sttl{
	background:url(https://canhael.net/gold/hapeat/smp/img/hapeat3/icon_plus.png) no-repeat 100% 50%;
	background-size:19px auto;
	-webkit-background-size:19px auto;
	-moz-background-size:19px auto;
}
.faq__sttl.open{
	background:url(https://canhael.net/gold/hapeat/smp/img/hapeat3/icon_minus.png) no-repeat 100% 50%;
	background-size:19px auto;
	-webkit-background-size:19px auto;
	-moz-background-size:19px auto;
	margin:0 0 4%;
}
.faq__sttl img{
	width:94%;
	padding:0 6% 0 0;
}
.faq__txt{
	background:url(https://canhael.net/gold/hapeat/smp/img/hapeat3/line_faq.png) repeat-x left top;
	background-size:5px auto;
	-webkit-background-size:5px auto;
	-moz-background-size:5px auto;
}
/* ダイエットのご相談
-------------------- */
.tel {

}
.tel__ttl {
	margin:0 0 4%;
}
.tel__txt {
	padding:0 4%;
	margin:0 0 4%;
}
.tel__box {
	position:relative;
	width:100%;
}
.tel__btn {
	position:absolute;
	width:53%;
    top: 46%;
    left: 3%;
}
/* product
-------------------- */
.product {
	padding:4%;
}
.product__ttl {
	font-weight:bold;
	margin:0 0 2%;
	font-size:0.7rem;
}
@media screen and (min-width: 480px) {
	.product__ttl { font-size:16px;}
}
.product__txt {
	font-size:0.7rem;
	margin:0 0 2%;
}
@media screen and (min-width: 480px) {
	.product__txt { font-size:16px;}
}
.product__list > li {
	font-size:0.7rem;
	display:inline;
}
@media screen and (min-width: 480px) {
	.product__list > li { font-size:16px;}
}
/* =================================================================
		共通
================================================================= */
.font_s {
	font-size:0.6rem;
	vertical-align:super;
}
.caution {
	text-align:right;
	font-size:0.6rem;
}
.font_em {
	color:#f63652;
}
.txt_r {
	text-align:right;
}
a:hover img{ opacity: 0.7; }
/* =================================================================
		CLEARFIX
================================================================= */
.box:after,
.box:after,
.box:after,
.box:after,
.box:after,
.grain__box:after,
.make__list02 > li:after,
.faq__list:after,
.make__list02:after,
.make__box:after,
.countermeasure__list:after,
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}