@charset "utf-8";
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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1.8}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {display:block}
ul, ol {list-style:none}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins {background-color:#ff9;color:#000;text-decoration:none}
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 #000;cursor:help}
table {border-collapse:collapse;border-spacing:0}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select {vertical-align:middle}

*========================================
BASIC
=======================================*/
html{-webkit-text-size-adjust:100%}
body{color:#4C4C4C; font-size:14px;font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;background:#fff; line-height:1.6; margin: 0;}

/* COMMON STYLE
=======================================*/
a{color:#CC0033;text-decoration:none;}
a:hover{color:#CC0033; text-decoration:none;}
.Hv a {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:1;}
.Hv a:hover {-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;opacity:0.5;}
.red, .fc-red {color:#FF0000;}
#main .Note {color:#eb5f64;}
.ta-c {text-align:center;}
.ta-r {text-align:right;}
/* respons view */
.spView{display:none;}
.pcView{}
/* other */
.clearfix:after{content: "."; display: block; height: 0; font-size:0;	clear: both; visibility:hidden}
.clearfix{display: inline-block;} 
* html .clearfix{height: 1%;}
.clearfix{display:block;}
h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;font-size:110%;}
form{margin:0px;}
img{border:0px;}
div{text-align:left;}

/*========================================
RADIO, CHECKBOX
=======================================*/
input[type=radio], input[type=checkbox] { display: inline-block; margin-right: 6px;color:#000;}
input[type=radio] + label, input[type=checkbox] + label { position: relative; color: #000; display: inline-block; margin-right: 12px; line-height: 30px;cursor: pointer;}
@media (min-width: 1px) {
input[type=radio], input[type=checkbox] {display: none; margin: 0;}
input[type=radio] + label, input[type=checkbox] + label {padding: 0 0 0 30px;}
input[type=radio] + label::before, input[type=checkbox] + label::before { content: ""; position: absolute; top: 50%; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px;margin-top: -9px;background: #FFF;border-radius: 4px;5-webkit-border-radius:4px;-moz-border-radius: 4px;}
input[type=radio] + label::before {border: 2px solid #ccc;border-radius: 30px;}
input[type=checkbox] + label::before {border: 2px solid #ccc;}
input[type=radio]:checked + label::after,  input[type=checkbox]:checked + label::after {content: "";position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block;}
input[type=radio]:checked + label::after {left: 5px; width: 8px; height: 8px;margin-top: -4px; background: #E71063;border-radius: 8px;}
input[type=checkbox]:checked + label::after {left: 3px; width: 16px;height: 8px;margin-top: -8px; border-left: 3px solid #E71063;border-bottom: 3px solid #E71063;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
}

/*********PAGE***********/
#container{	width:100%;margin:auto; background: url(common/img/bg.png) repeat;}
.htmltag{width:80%;border:1px solid #666666;padding:5px;margin:2px auto 5px auto;}
#page {	-moz-box-sizing: border-box;-webkit-box-sizing: border-box;	width: 800px;margin: 0 auto;background: #fff;}
/*---------------- header ----------------*/
.global {clear: both;padding: 10px 0;background:#B9B9B9;color:#1F1F1F;margin-top:0;}
.global h1 {padding: 0 15px;text-align: center;	font-size: 150%;}
/*---------------- footer ----------------*/
.globalf {clear: both; padding: 20px 5px; background: #888; color: #fff; margin-bottom: 15px;}
/*---------------- main ----------------*/
.main {	clear: both;padding: 50px;font-size: 100%;}
p { margin-bottom: 15px;}
table {margin: 0 0 10px; width: 100%; font-size: 108%;}
table th {width: 100%; padding:0; text-align: left; display: block; margin-bottom: 10px;}
table td {pwidth: 100%; padding:0;display: block; margin-bottom: 20px;}
.inputText {width: 96%; padding: 8px 2%; font-size: 130%;}
.inputSelect {padding: 3px; font-size: 130%;}
.inputText.inputTextShort {width: 45%;}
.inputText.inputTextShortest {width: 30%;}
textarea {width: 80%; height: 100px; padding: 3px;}
.formBtn {font-size: 140%; padding: 4px; padding-left: 8px; padding-right: 8px; width: 150px; -webkit-border-radius: 6px; -webkit-box-shadow: 0 2px 2px #CCC; border-radius: 6px; box-shadow: 0 2px 2px #CCC;}
.center-text {text-align: center;	margin: 0 0 15px;}
.fs-12 {font-size:12px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}
.fs-20 {font-size:20px;}
.fs-22 {font-size:22px;}
.fs-24 {font-size:24px;}
.fs-28 {font-size:28px;}
.fs-32 {font-size:32px;}
.bold {font-weight:bold;}
.error {color: #FF0000;}
span.require {color: red; font-weight: bold;}

/* custom */
#habits table{text-align: center;font-size: 14px;margin: 20px auto;}
#habits table tr{background:#fff;}
#habits table th{background: #e4e4e4;width: 31%;}
#habits table tr.first th{background: #e4e4e4;text-align: center;background: #353636;color: #fff;border-bottom: none;}
#habits table tr.first th h1{font-size: 18px;padding: 5px 0;}
#habits table th .require{font-weight: normal;background: #ca4b4b;color: #fff;padding: 0px 8px;margin: 8px 0 8px 5px;display: inline-block;font-size: 12px;}
#habits table td{text-align: left;padding: 18px;}
#habits .formBtn{-webkit-appearance: none;background-color: #ca4b4b;border: none;color: #fff;margin: 20px 0;font-weight: bold;padding: 8px 50px;width: auto;}
.Enter { width: 260px; margin: 0 auto;}
.btn { display: inline-block;border: none;border-radius: 5px;background:#cb4e4e;color: #fff;min-width: 260px; cursor: pointer; padding: 12px; margin: 15px auto; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; font-size: 16px;font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', '�ҥ饮�γѥ� ProN W3', Meiryo, �ᥤ�ꥪ, sans-serif; letter-spacing: 4px; font-weight: bold;}
.btn:hover {opacity: .8;}
.btn-2g {border-radius: 40px;}
.btn-2 {background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none;}

.ComfirmCnt { width: 600px; margin: 0 auto; background: #fff;}
.ComfirmCnt dl {overflow: hidden; border-bottom: 1px dotted #AAAAAA; margin-bottom: 2%;}
.ComfirmCnt dl dt { float: left; width: 26%; padding: 2%; font-weight: bold;}
.ComfirmCnt dl dd { float: right; width: 66%; padding: 2%;}
.formRedBtn{min-width: 210px; -webkit-appearance: none;background-color: #ca4b4b;border: none;color: #fff;margin: 20px 0;font-weight: bold;padding: 8px 50px;width: auto;font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

@media screen and (max-width: 600px) {
.pcView{display: none;}
/*********PAGE***********/
#container{}
#page {width: 100%;margin: 0 auto;}
/*---------------- header ----------------*/
.global {clear: both;padding: 15px 0;background:#B9B9B9;color:#1F1F1F;margin-top:0;}
.global h1 {padding: 0 15px;text-align: center;	font-size: 150%;}
/*---------------- footer ----------------*/
.globalf {clear: both; padding: 20px 5px; background: #888; color: #fff; margin-bottom: 0;}
/*---------------- main ----------------*/
.main {	clear: both;padding:4%;font-size: 100%;}
p { margin-bottom: 15px;}
table {margin: 0 0 10px; width: 100%; font-size: 108%;}
table th {width: 100%; padding:0; text-align: left; display: block; margin-bottom: 10px;}
table td {pwidth: 100%; padding:0;display: block; margin-bottom: 20px;}
.inputText {width: 96%; padding: 8px 2%; font-size: 130%;}
.inputSelect {padding: 3px; font-size: 130%;}
.inputText.inputTextShort {width: 45%;}
.inputText.inputTextShortest {width: 30%;}
textarea {width: 80%; height: 100px; padding: 3px;}
.formBtn {font-size: 140%; padding: 4px; padding-left: 8px; padding-right: 8px; width: 150px; -webkit-border-radius: 6px; -webkit-box-shadow: 0 2px 2px #CCC; border-radius: 6px; box-shadow: 0 2px 2px #CCC;}
.center-text {text-align: center;	margin: 0 0 15px;}
.fs-12 {font-size:12px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}
.fs-20 {font-size:20px;}
.fs-22 {font-size:22px;}
.fs-24 {font-size:24px;}
.fs-28 {font-size:28px;}
.fs-32 {font-size:32px;}
.bold {font-weight:bold;}
.error {color: #FF0000;}
span.require {color: red; font-weight: bold;}

/* custom */
#habits table{text-align: center;font-size: 14px;margin: 20px auto;}
#habits table tr{background:#fff;}
#habits table th{background: #e4e4e4;width: 31%;}
#habits table tr.first th{background: #e4e4e4;text-align: center;background: #353636;color: #fff;border-bottom: none;}
#habits table tr.first th h1{font-size: 18px;padding: 5px 0;}
#habits table th .require{font-weight: normal;background: #ca4b4b;color: #fff;padding: 0px 8px;margin: 8px 0 8px 5px;display: inline-block;font-size: 12px;}
#habits table td{text-align: left;padding: 18px;}
#habits .formBtn{-webkit-appearance: none;background-color: #ca4b4b;border: none;color: #fff;margin: 20px 0;font-weight: bold;padding: 8px 50px;width: auto;}
.Enter { width: 260px; margin: 0 auto;}
.btn { display: inline-block;border: none;border-radius: 5px;background:#cb4e4e;color: #fff;min-width: 260px; cursor: pointer; padding: 12px; margin: 15px auto; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; font-size: 16px;font-family:Helvetica, Arial, 'Hiragino Kaku Gothic ProN', '�ҥ饮�γѥ� ProN W3', Meiryo, �ᥤ�ꥪ, sans-serif; letter-spacing: 4px; font-weight: bold;}
.btn:hover {opacity: .8;}
.btn-2g {border-radius: 40px;}
.btn-2 {background: #cb4e4e; color: #fff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none;}
}

.ComfirmCnt { width: 98%; margin: 0 auto; background: #fff;}
.ComfirmCnt dl {overflow: hidden; border-bottom: 1px dotted #AAAAAA; margin-bottom: 2%;}
.ComfirmCnt dl dt { float: left; width: 36%; padding: 2%; font-weight: bold;}
.ComfirmCnt dl dd { float: right; width: 56%; padding: 2%;}