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

html {
	-webkit-text-size-adjust: 100%
}

body {
	position: relative;
    margin: 0;
	background-color:#fff;
	color:#333333;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:14px;
	line-height:20px;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

a img {
    border-style:none;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

input[type="button"] {
	-webkit-appearance: none;
}

#container{
	background-color:#FFF;
	max-width:730px;
	margin:0 auto;
}

#container-pop{
	background-color:#FFF;
	max-width:730px;
	margin:10px auto;
}
#container-banner{
	margin:0;
	border-left:3px solid #eeeeee;
	border-right:3px solid #eeeeee;
	border-bottom:3px solid #eeeeee;
	text-align:center;
	width:213px;
}

#question-box{
	padding:3px 5px;
	text-align:left;
}
/*--------------------------------------

　フォント

---------------------------------------*/
.text-price{
color: #C41230;
font-weight: bold;
font-size: 1.5em;
padding-top: 5px;
}
.text-priceS{
font-size: 0.6em;
font-weight:normal;
}

/*--------------------------------------

　アドバイス

---------------------------------------*/
#box-result{
	margin:20px 10px;
	background-image:url(../img/paper-bg-01.jpg);
	background-color:#fff;
	padding:10px;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
	position: relative;
	behavior: url(/sp/css/PIE.htc);
}
#box-note{
	border:2px solid #BCDCFF;
	padding:20px;
}
#box-note-sp{
	border:2px solid #BCDCFF;
	padding:5px;
}
.box-noteline{
	background-image:url(../img/note.png);
	font-size: 14px;
	line-height: 30px;
	padding: 0 10px;
	margin-top:20px;
	margin-bottom:10px;
}
.life-title{
	font-size: 16px;
	line-height: 30px;
	font-weight:bold;
	margin-top:30px;
}
.box-noteline img{
	width:165px;
	float:right;
	border:5px solid #ffffff;
	background-color:#fff;
	margin-top:35px;
	margin-right:-5px;
	margin-left:10px;
	-webkit-box-shadow: #333 1px 1px 8px;
	-moz-box-shadow: #333 1px 1px 8px;
	box-shadow: #333 1px 1px 8px;
	position: relative;
	behavior: url(/sp/css/PIE.htc);
}
@media screen and (max-width: 450px) {
   /* 表示領域が450px以下の場合に適用するスタイル */
   div.box-noteline img { display:none;}
}

/*--------------------------------------

　タイトル

---------------------------------------*/
/* 吹出しタイトル */
#title-banner{
	position:relative;
	padding:0;
	margin-bottom:7px;
	font-size:12px;
	font-weight:bold;
	line-height:20px;
	color:#ffffff;
	text-align:center;
	background:#cc0033;
	border-bottom:#cc0033 solid 3px;
}
#title-banner:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#cc0033;
}
#title-banner:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#cc0033;
	z-index:1;
}

/* 吹出しタイトル */
#heading01{
	position:relative;
	padding:3px 5px;
	margin-bottom:10px;
	font-size:28px;
	font-weight:bold;
	line-height:40px;
	color:#0374c1;
	text-align:center;
	background:#fff;
	border-top:#0374c1 solid 3px;
	border-bottom:#0374c1 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}
#heading01:before{
	content:" ";
	position:absolute;
	top:100%;
	left:24px;
	width:0;
	height:0;
	border-width:12px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#0374c1;
}
#heading01:after{
	content:" ";
	position:absolute;
	top:100%;
	left:28px;
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#f0f0f0;
	z-index:1;
}
.heading-cup{
	font-size:16px;
	line-height:17px;
}
@media screen and (max-width: 450px) {
   /* 表示領域が450px以下の場合に適用するスタイル */
   .heading-cup { font-size:10px;}
}
.title-advice{
	font-size:22px;
	font-weight:bold;
	color:#006cb6;
	border-bottom:2px dotted #006cb6;
	margin-bottom:10px;
	margin-top:20px;
	padding-bottom:5px;
	padding-left:5px;
}
	
/*--------------------------------------

　習慣チェック

---------------------------------------*/
/* バナータイプ */
.question {
	border-bottom:#999999 dotted 1px;
	margin:0 0 5px 0;
	width:100%;
}
.question img{
	width:100px;
	height:60px;
	margin-bottom:10px;
	margin-left:5px;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	behavior: url(/sp/css/PIE.htc);
}
.question td{
	text-align:left;
}
.question th{
	width:110px;
	text-align:left;
	font-weight:normal;
}
/* 本格フルタイプ */
.questionL {
	border-bottom:#999999 dotted 1px;
	margin:15px;
}
.questionL img{
	width:165px;
	margin-bottom:15px;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
}
.questionL td{
	text-align:left;
	font-size:16px;
	padding-left:10px;
}
.questionL th{
	width:165px;
	text-align:left;
	font-weight:normal;
}
/* スマホタイプ */
.questionS {
	border-bottom:#999999 dotted 1px;
	margin:0;
	width:100%;
}
.questionS img{
	width:80px;
	height:auto;
	margin-left:5px;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	behavior: url(/sp/css/PIE.htc);
}
.questionS td{
	text-align:left;
	
}
.questionS th{
	width:90px;
	text-align:left;
	font-weight:normal;
}

.setsumon{
	height:33px;
	font-size:14px;
	line-height:17px;
	padding-left:27px;
	background-image:url(../img/icon_q.png);
	background-repeat:no-repeat;
	background-position:left top;
	color:#666;
	margin-bottom:3px;
	display: table-cell;
    vertical-align: middle;
}

.setsumonS{
	color:#666;
	bottom:0px;
	line-height:17px;
	width:100%;
}
.setsumonQ{
	height:38px;
	width:27px;
	background-image:url(../img/icon_q_s.png);
	background-repeat:no-repeat;
	background-position:left bottom;
}


/*--------------------------------------

　ボタン

---------------------------------------*/
.btA{
	padding:5px 0;
	width:95%;
	margin-bottom:10px;
	font-size:12px;
	letter-spacing:-0.05em;
	color: #fff;  
	background-color:#c41230;
	border:1px solid #8f0119;
	border-radius: 2px;        /* CSS3草案 */  
    -webkit-border-radius: 2px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 2px;   /* Firefox用 */
	position: relative;
	behavior: url(/sp/css/PIE.htc);
}
.btA:hover {
/*↓ロールオーバー時の背景画像を指定*/
    filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-khtml-opacity: 0.6;              /* Safari 1.x */
}

.btB {
    width:168px;
    height:31px;
    padding:0;
    border:0;
    background:url(../img/btB.png) no-repeat left top;
    text-indent:-9898px;
    font-size: 0px;
    line-height: 0px;
    cursor:pointer;
}
.btB:hover,
.btB:focus {
    background-position:left -31px;
}
.btC {
    width:86px;
    height:25px;
    padding:0;
	margin-bottom:5px;
    border:0;
    background:url(../img/btC.png) no-repeat left top;
    text-indent:-9898px;
    font-size: 0px;
    line-height: 0px;
    cursor:pointer;
}
.btC:hover,
.btC:focus {
    background-position:left -25px;
}

.btD{
	padding:5px 20px;
	margin:10px 0;
	width:100%;
	font-size:14px;
	color: #fff;  
    font-weight: bold;
	background-color:#E71063;
	border:1px solid #990033;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */
	behavior: url(PIE.htc);
}
.btD:hover {
/*↓ロールオーバー時の背景画像を指定*/
    filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
.btE {
    display:block;
    width:138px;
	margin:20px auto;
    height:44px;
    padding:0;
    border:0;
    background:url(../img/bt_start.png) no-repeat left top;
    text-indent:-9898px;
    font-size: 0px;
    line-height: 0px;
    cursor:pointer;
}
.btE:hover,
.btE:focus {
    filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
.btF {
    display:block;
    width:250px;
	margin:20px auto;
    height:36px;
    padding:0;
    border:0;
    background:url(../img/btF.png) no-repeat left top;
    text-indent:-9898px;
    font-size: 0px;
    line-height: 0px;
    cursor:pointer;
}
.btF:hover,
.btF:focus {
    filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.btG:hover {
/*↓ロールオーバー時の背景画像を指定*/
    filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.btH {
    display:block;
    width:200px;
	margin:5px auto;
    height:35px;
    padding:0;
    border:0;
    background:url(../img/btH3.png) no-repeat left top;
	background-repeat:no-repeat;
    text-indent:-9898px;
    font-size: 0px;
    line-height: 0px;
    cursor:pointer;
}
.btH:hover,
.btH:focus {
    filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}



/*--------------------------------------

　設問ラジオボタン

---------------------------------------*/

.redcheck {
    padding: 6px 6px 0 6px;
}
.redcheck input[type=radio],
.redcheck input[type=checkbox] {
    display: inline-block;
}
.redcheck input[type=radio] + label,
.redcheck input[type=checkbox] + label {
    position: relative;
     
    display: inline-block;
     
    font-size: 15px;
    line-height: 25px;
	color:#808080;
	font-weight:normal;
     
    cursor: pointer;
}
 
@media (min-width: 1px) {
    .redcheck input[type=radio],
    .redcheck input[type=checkbox] {
        display: none;
        margin: 0;
    }
    .redcheck input[type=radio] + label,
    .redcheck input[type=checkbox] + label {
        padding: 0 0 0 22px;
    }
    .redcheck input[type=radio] + label::before,
    .redcheck input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 14px;
        height: 14px;
        margin-top: -10px;
         
        background: #FFF;
    }
    .redcheck input[type=radio] + label::before {
        border: 3px solid #bbb;
        border-radius: 30px;
    }
    .redcheck input[type=checkbox] + label::before {
        border: 2px solid #bbb;
    }
    .redcheck input[type=radio]:checked + label::after,
    .redcheck input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    .redcheck input[type=radio]:checked + label::after {
        left: 2px;
         
        width: 10px;
        height: 10px;
        margin-top: -8px;
         
		background-color:#999;
        border-radius: 8px;
    }
    .redcheck input[type=checkbox]:checked + label::after {
        left: 3px;
         
        width: 16px;
        height: 8px;
        margin-top: -8px;
         
        border-left: 3px solid #999;
        border-bottom: 3px solid #999;
         
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

/*--------------------------------------

　性別ラジオボタン

---------------------------------------*/

.redcheck-L {
    padding: 6px;
}
.redcheck-L input[type=radio],
.redcheck-L input[type=checkbox] {
    display: inline-block;
}
.redcheck-L input[type=radio] + label,
.redcheck-L input[type=checkbox] + label {
    position: relative;
     
    display: inline-block;
     
    font-size: 20px;
    line-height: 35px;
	color:#333;
     
    cursor: pointer;
}
 
@media (min-width: 1px) {
    .redcheck-L input[type=radio],
    .redcheck-L input[type=checkbox] {
        display: none;
        margin: 0;
    }
    .redcheck-L input[type=radio] + label,
    .redcheck-L input[type=checkbox] + label {
        padding: 0 0 0 30px;
    }
    .redcheck-L input[type=radio] + label::before,
    .redcheck-L input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 35%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 25px;
        height: 25px;
        margin-top: -7px;
         
        background: #FFF;
    }
    .redcheck-L input[type=radio] + label::before {
        border: 2px solid #999;
        border-radius: 40px;
    }
    .redcheck-L input[type=checkbox] + label::before {
        border: 2px solid #999;
    }
    .redcheck-L input[type=radio]:checked + label::after,
    .redcheck-L input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 35%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    .redcheck-L input[type=radio]:checked + label::after {
        left: 5px;
         
        width: 15px;
        height: 15px;
        margin-top: -2px;
         
		background-color:#E71063;
        border-radius: 8px;
    }
}
/*--------------------------------------

　習慣チェックスタート

---------------------------------------*/
#title-form{
	text-align:center;
	font-size:24px;
	padding-top:40px;
	margin-bottom:10px;
	color:#999999;
}
#box-form{
	text-align:center;
	background-image:url(../img/bg_form.jpg);
	background-repeat:no-repeat;
	background-position:bottom left;
}

#box-form-sp{
	text-align:center;
}

select {
	width: 250px;
	font-size:18px;
	margin-left:10px;
	margin-top:10px;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	background: #eee;
	background: url(arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 15px, 100%;
}

/*--------------------------------------

　商品カード

---------------------------------------*/
.p-name{
font-size: 16px;
font-weight: bold;
color: #006CB6;
text-decoration: none;
margin-bottom:5px;
}
.p-read{
	font-size: 0.9em;
	color: #006CB6;
	text-decoration: none;
}
#box-product{
	border-top:2px solid #B7D0ED;
	padding:15px 10px;
	position: relative;
}
#box-productP1{
	border:3px solid #006cb6;
	padding:10px;
	margin:0 5px;
	background-color:#ffffff;
	position: relative;
}
#box-productP1 table{
	width:100%;
	line-height: 140%;
}
#box-product table{
	width:100%;
}
#box-caution{
	margin:10px;
	padding:10px;
	font-size:12px;
	line-height:15px;
	text-align:left;
	color:#F00;
	border: 1px solid #F00;
	background-color:#FFF;
}
#box-resultS{
	background-image:url(../img/img_kanrieiyousi.png);
	background-repeat:no-repeat;
	padding-left:110px;
}
/*--------------------------------------

　商品カードスマートフォン

---------------------------------------*/
#pro-img{
	width:140px;
	height:140px;
}
#pro-text{
	position: absolute;
	padding-left:160px;
	padding-right:10px;
	top:20px;
	left:0px;
	display:block;
}
#pro-bt{
	text-align:right;
	right:0px;
	display:block;
}
@media screen and (max-width: 450px) {
   /* 表示領域が450px以下の場合に適用するスタイル */
   div#pro-text { position: static; padding-left:0;}
   div#pro-img { margin:0 auto;}
}
/*--------------------------------------

　アドバイスキーワード

---------------------------------------*/
.kw-wave{
	background-image:url(../img/wave_red.png);
	background-position:bottom;
	background-repeat:repeat-x;
}
.kw-marker{
	background-color:#ffff66;
	padding:0 5px;
	font-weight:bold;
}
.kw-wm{
	background-image:url(../img/wave_red.png);
	background-position:bottom;
	background-repeat:repeat-x;
	background-color:#ffff66;
	padding:0 5px;
	font-weight:bold;
}
.kw-cap{
	font-size:10px;
	font-weight:normal;
	line-height:15px;
}
.kw-bold{
	font-weight:bold;
	font-size:14px;
}
.kw-kakoi{
	border:1px solid #999;
	padding:7px;
	font-size:12px;
	line-height:17px;
	margin:10px 0;
	background-color:#fff;
}
.kw-title{
	font-size:16px;
	font-weight:bolder;
	background-image:url(../img/icon_a.png);
	background-repeat:no-repeat;
	background-position:left top;
	padding-left:25px;
}
#honkaku-bt{
	text-align:center;
	margin:20px auto;
}
#honkaku-bt img{
	margin:auto;
}
@media screen and (max-width: 450px) {
   /* 表示領域が450px以下の場合に適用するスタイル */
   div#honkaku-bt img { width:95%;}
}
#sp-footer{
	background-color:#006CB6;
	color:#fff;
	font-size:12px;
	padding:10px 0;
	display:block;
	text-align:center;
}