html {
height: 100%;
position: relative;
font-size: 62.5%;
}

body {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
margin: 0;
padding: 0;
height: 100%;
color: #000;
font-size: 16px;
line-height: 2;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-print-color-adjust: exact;
}

#wrap {
width: 100%;
position: relative;
height:auto !important;
height: 100%;
min-height: 100%;
}

body.login {
background: #f1f1f1;
}

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

audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

textarea {
resize: vertical;
}

.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

.pc {
display: inline-block;
}

.sp {
display: none;
}

h2 {
margin: 0 0 30px;
font-size: 18px;
font-weight: normal;
text-align: center !important;
position: relative;
}

h2 img {
width: auto;
}

h3 {
margin-top: 75px;
margin-bottom: 35px;
padding-bottom: 5px;   
font-size: 24px;
color: #666;
text-align: center;
}

h4 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin: 0 0 15px;
letter-spacing: .5em;
}

a {
/*color: #4d4d4d;*/
color: #000;
}

a img {
border: none\9;
}

p {
font-size: 14px;
line-height: 1.4;
color: #4d4d4d;
}

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

.w700 {
width: 700px;
margin: 0 auto;
}

.w800 {
width: 800px;
margin: 0 auto;
}

.w1000 {
width: 1000px;
margin: 0 auto;
}

.w1400 {
width: 1400px;
margin: 0 auto;
}

.float-l {
float: left !important;
}

.float-r {
float: right !important;
}

.tac {
text-align: center;
}

.mgb50 { margin-bottom: 50px;}
.mgb70 { margin-bottom: 70px;}
.mgb80 { margin-bottom: 80px;}

#login {
width: 320px;
padding: 8% 0 0;
margin: auto;
background: #fff !important;
}

#login h1 {
font-size: 24px;
line-height: 1.6;
}

#loginform {
background: #fff;
padding: 20px;
}

#login p label {
color: #72777c;
font-size: 14px;
margin: 0;
}

#login form .input, #login input[type=text] {
font-size: 24px;
width: 100%;
padding: 3px;
margin: 2px 6px 16px 0;
}

.submit .button {
background: #72777c;
padding: 15px 20px;
color: #fff;
border: none;
border-radius: 5px;
width: 100%;
font-size: 120%;
}

.header {
height: 85px;
width: 100%;
margin: 0;
padding: 0;
background-image: url(../assets/img/header-bg.png);
background-repeat: repeat-x;
position: fixed;
top: 0;
z-index: 99;
}

.header-inner {
width: 1024px;
margin: 0 auto;
padding: 0;
position: relative;
}

.header .logo {
width: 112px;
float: left;
}

.header .logo img {
width: 100%;
}

.header a {
display: block;
color: #444;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

.header a:hover {
color: #000;
}

.header .info-logo {
width: 150px;
float: left;
height: 20px;
border: 1px solid #4d4d4d;
padding: 0 10px 8px;
font-size: 14px;
color: #4d4d4d;
margin-left: 20px;
margin-top: 18px;
text-align: center;
}

.header .info-logo a {
text-decoration: none;
}

.header .nav-tools {
float: right;
width: 245px !important;
padding-top: 16px !important;
}

.header .change-password {
float: right;
font-size: 90%;
margin-top: 0;
}

.header .logout {
width: 30%;
float: left;
text-align: right;
font-size: 90%;
height: 28px;
}

.bg {
background-color: #f9f9f9;
}

.box {
width: 984px;
margin: 85px auto 0 !important;
padding: 20px;
position: relative;
}

h1 {
clear: both;
color: #4d4d4d;
padding-bottom: 10px;
font-size: 20px;
font-weight: normal;
margin: 0 0 40px;
}

.input-area {
margin: 30px auto;
}

input {
}

.backlink {
text-align: right;
font-size: 12px;
margin: 20px 0 30px;
}

.btn {
margin: 10px auto 30px;
padding: 20px 0;
background: #e6e6e6;
border: 1px solid #000;
text-align: center;
}

.btn a {
text-decoration: none;
display: block;
}

.btn.column2 {
width: 38%;
float: left;
margin: 30px 5%;
padding: 25px 0;
background: #ebebeb;
text-align: center;
}

.btn.column2 a {
color: #000;
}

.btn.input {
padding: 0;
background: none;
border: none;
}

.mw_wp_form_input .btn.input {
margin: 10px auto 30px !important;
width: 480px !important;
height: 61px\9;
}

input[type="submit"][disabled] {
opacity: 0.4;
}

#wpmem_reg .div_textarea, #wpmem_reg .div_select, #wpmem_reg .div_checkbox, #wpmem_reg .div_multiselect, #wpmem_reg .div_multicheckbox, #wpmem_reg .div_radio, #wpmem_reg .div_image, #wpmem_reg .div_file, #wpmem_reg .div_url {
margin: 0 13% 10px !important;
text-align: center;
}

#wpmem_reg input {
font-size: 16px;
color: #fff;
background: #72777c;
border-radius: 5px;
border: none;
}
.contents #wpmem_reg legend {
border-bottom: 2px solid #72777c;
color: #72777c;
padding-bottom: 10px;
margin-bottom: 40px;
width: 100%;
font-size: 20px;
font-weight: normal;
}

.notes {
font-size: 12px !important;
font-weight: bold;
color: #d72b81 !important;
margin: 5px 0 20px;
margin: 5px 0 20px\9;
}

.purpose {
font-size: 15px !important;
font-weight: bold;
color: #d72b81 !important;
margin: 5px 0 20px;
margin: 5px 0 20px\9;
}

h2 .notes {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
}

input {
height: 32px;
padding: 4px !important;
vertical-align: 2px;
width: 80%;
font-size: 15px;
}

#post-code1 {
width: 50px;
}

#post-code2 {
width: 65px;
}

.login,
#wpmem_login {
clear: both;
width: 500px;
float: left;
padding-right: 0;
}


.changepw {
margin: 35px 0;
}

.changepw #wpmem_login {
min-height: 375px;
}

.changepw #wpmem_login {
width: 800px;
margin: 30px auto;
float: none;
}

.changepw #wpmem_login label {
width: 280px;
width: 290px\9;
display: block;
float: left;
font-size: 16px;
line-height: 40px;
line-height: 30px\9;
margin-bottom: 20px;
margin-bottom: 20px\9;
}

.changepw #wpmem_login .button_div input {
background: url(../assets/img/btn_pwd_change.png);
width: 480px;
height: 61px;
color: transparent;
border: none;
text-indent: none;
text-indent: -9999px\9;
}

.changepw .wpmem_msg p {
font-weight: bold;
color: #d72681;
font-size: 18px !important;
}

.changepw .button_div {
width: 480px;
margin: 0 auto;
}

.changepw .wpmem_msg {
width: 100% !important;
padding: 20px 0 !important;
}

#wpmem_reg, #wpmem_login,
.changepw #wpmem_login {
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif !important;
}

.login #wpmem_login legend,
.changepw #wpmem_login legend,
#wpmem_login legend {
font-size: 20px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
width: 100%;
text-align: center !important;
}

.changepw #wpmem_login legend {
margin-bottom: 30px;
}

#wpmem_reg .button_div, #wpmem_login .button_div {
clear: both;
margin: 0 auto;
}

.login #wpmem_login fieldset,
#wpmem_login {
margin: 0 auto;
position: relative;
}

#wpmem_login {
height: 275px;
height: 275px\9;
}

.login #wpmem_login .div_text,
#wpmem_login .div_text {
width: 370px;
float: right;
margin-bottom: 30px;
margin-left: 0 !important;
margin-bottom: 20px\9;
height: 30px\9;
}

#log {
height: 18px\9;
}

.changepw #wpmem_login .div_text {
width: 515px;
width: 505px\9;
margin-bottom: 20px;
}

.login #wpmem_login .div_text input,
#wpmem_login .div_text input {
height: 40px;
height: 18px\9;
border: 1px solid #ccc;
}

.login #wpmem_login label {
display: block;
width: 100px;
float: left;
margin-bottom: 30px;
margin-bottom: 20px\9;
line-height: 40px;
line-height: 28px\9;
}

.login #wpmem_login .button_div > label {
display: none;
}

.login #wpmen_login .button_div,
.login #wpmen_login .link-text {
display: none !important;
}

.login #wpmem_reg,
.login ul {
display: none;
}

#nbsp1,
#nbsp2 {
display: none;
}

#rememberme,
#rememberme + label,
.button_div + .link-text,
.link-text + .link-text {
display: none;
}

.login #wpmem_login .button_div {
position: absolute;
left: 55px;
bottom: -25px !important;
bottom: 0 !important\9;
}

.login #wpmem_login .button_div .buttons {
background: url(../assets/img/btn_login.png);
width: 360px;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.sign-up {
margin: 0;
width: 400px !important;
float: right;
}
.sign-up h2,
.login #wpmem_login legend {
font-size: 16px;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
.sign-up h2 br {
display: none;
}
.sign-up .btn {
width: 100%;
background: none;
padding: 0;
border: none;
}


.regist #wpmem_login,
.regist ul {
display: none;
}

.contents.regist #wpmem_reg .div_text {
float: right;
width: 85%;
}

.contents.regist h2 .notes {
left: 800px !important;
bottom: 0;
}

.contents.regist #wpmem_reg label {
color: #72777c;
display: block;
width: 20%;
float: left;
}

.contents.regist #wpmem_reg .req {
color: #ff0000;
}

.contents.regist #wpmem_reg #phone1 {
width: 40%;
}

.contents.regist #wpmem_reg #zip {
width: 40%;
}

.contents.regist .form .mwform-zip-field {
width: 400px\9;
height: 30px\9;
}

.contents.regist h2 .notes {
margin-left: 20px;
}

.contents.order h3 {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
position: relative;
}

.contents.order h3 .notes {
position: absolute;
right: 35px;
bottom: 0;
}

.contents.order .set-img {
margin-bottom: 40px;
}


.sample h4 {
text-align: left;
letter-spacing: 0;
font-weight: bold;
font-size: 19px;
}

.sample .sample-set {
background-image: none !important;
background-repeat: no-repeat;
background-position: top left;
position: relative;
height: 160px !important;
margin-bottom: 20px;
padding-bottom: 10px;
}

.sample .sample-set .group {
position: inherit;
left: 0;
bottom: 0;
font-size: 16px;
background-color: #f6e8c3 !important;
padding: 10px;
}

.order.confirm .sample .sample-set .group {
background-color: #fff !important;
}

.sample .sample-set .group > span {
width: 45% !important;
float: left;
position: relative;
}

.sample .sample-set .group > span.error {
position: absolute;
left: 0;
bottom: 0;
}

.sample .sample-set .radio-field {
position: static !important;
}

.sample .sample-set .radio-field .group .horizontal-item + .horizontal-item {
margin-left: 0 !important;
}

.sample .sample-set .radio-field label {
color: #000 !important;
font-weight: bold !important;
font-size: 16px !important;
}

.order .sample .sample-set .radio-field .mwform-radio-field span {
/*display: none\9;*/
padding-left: 2em;
color: #4d4d4d !important;
}

.sample .sample-set .radio-field p {
display: none;
}

.sample .sample-set .radio-field input {
width: 15px !important;
position: absolute;
left: 0 !important;
bottom: 0 !important;
}

#note01 {
padding-top: 5px;
}

#note01.sample .sample-set #sample-3 + span,
#note01.sample .sample-set #sample-4 + span,
#note01.sample .sample-set #sample-5 + span,
#note01.sample .sample-set #sample-6 + span {
color: #cb8515 !important;
}

/*.sample .sample-set .radio-field input#sample-2 {
left: 165px\9;
}
.sample .sample-set .radio-field input#sample-3 {
left: 300px\9;
}
.sample .sample-set .radio-field input#sample-4 {
left: 440px\9;
}
.sample .sample-set .radio-field input#sample-5 {
left: 580px\9;
}
.sample .sample-set .radio-field input#sample-6 {
left: 720px\9;
}*/

.order.confirm #note01.sample .sample-set {
background-image: none !important;*/
/*background: url(../assets/img/order/sample_bg_confirm.png) no-repeat top left !important;*/
text-align: center; 
height: 75px !important;
border: 3px solid #1c1f86 !important;
border-radius: 16px !important;
}

.order.confirm #note01.sample .sample-set .group {
left: 250px !important;
top: 10px !important;
font-size: 24px !important;
font-weight: bold !important;
position: absolute;
}

.flow {
text-align: center;
}
.flow ol li {
width: 115px;
float: left;
text-align: left;
margin: 0 55px;
font-size: 14px;
}

.flow ol li.li_1 {
    width: 33.3333%;
    margin: 0 auto;
    display: block;
}

.flow ol li.li_2 {
width: 160px;
margin: 0 40px;
}

.flow ol li.li_3 {
width: 150px;
margin: 0 35px;
}

.flow ol li.li_4 {
width: 127px;
margin: 0 0 0 55px !important;
}



.contents.order .title {
margin-top: 0;
margin-bottom: 15px;
padding: 10px;
border-bottom: none;
}

.contents.order .ps {
margin-top: 50px;
background-color: #f6e8c3;
padding: 26px;
}

.contents.order .cth {
background: #eee;
padding: 29px;
}

.contents.order .btn-area {
width: 794px;
text-align: center;
}

.sample .line li {
background: #fff;
border-radius: 6px;
padding: 15px 0;
height: 160px;
}

.sample .ps .line li {
width: 194px;
float: left;
height: 300px;
}

.group #sample-1,
.group #sample-2,
.group #sample-3,
.group #sample-4,
.group #sample-5,
.group #sample-6 {
width: 20px !important;
margin-left: 5px !important;
}

.contents.order .sample .radio-field .mwform-radio-field.horizontal-item input {
width: 35px !important;
vertical-align: -9px;
text-indent: -9999px\9;
}

.contents.order .sample .ps .radio-field .mwform-radio-field.horizontal-item {
width: 198px;
float: left;
text-align: center;
}

.contents.order .order .mwform-radio-field.horizontal-item {
display: inline-block;
width: 155px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

.contents.order .order .mwform-radio-field.horizontal-item input {
width: 20px !important;
vertical-align: -7px;
}

.contents.order .order .group .mwform-radio-field.horizontal-item {
width: 45% !important;
}

.req-text {
display: none;
}

.regist .form p.notes {
margin-left: 170px !important;
}

.form input + p {
display: none;
}

.login .form .div_text #pwd + p {
/*display: block;*/
display: none;
margin-top: 3px;
}

.contents {
width: 954px;
background: #f9f9f9;
margin: 30px 0 0;
padding: 50px 35px 35px;
}

span.title {
width: 200px;
float: left;
line-height: 32px;
}

.title {
font-size: 105%;
font-weight: bold;
}

span.area {
line-height: 32px;
}

.gr {
margin: 20px 0;
}

.gr label {
width: 200px;
float: left;
}

label {
font-size: 18px;
}

.column {
clear: both;
margin: 0 0 20px;
}

.column .sub {
margin: 10px 0;
padding: 0 0 0 50px;
}

.column .sub .title {
width: 150px;
}

.completed .txt-area,
.order-completed .txt-area{
padding: 0;
}

.completed p,
.order-completed p {
text-align: center;
font-size: 16px;
color: #000;
line-height: 2;
}

.completed h1,
.order-completed h1{
border-bottom: none;
text-align: center;
font-size: 24px;
line-height: 1.6;
margin: 0 0 20px;
}

.completed .inquiry-info,
.order-completed .inquiry-info {
width: 600px;
margin: 30px auto !important;
}

.completed .btn-area,
.order-completed .btn-area{
margin: 0 auto;
width: 240px;
}

.order-completed .btn-area .btn,
.contents.completed .btn-area .btn {
padding: 10px 0;
}

.btn.close {
width: 150px;
float: right;
margin: 10px 0 0;
padding: 5px;
}

.txt-area {
padding: 30px 0;
}

.red {
color: red;
}

.bg-w {
background: #fff;
padding: 40px;
margin: 0 0 50px;
}

.order .bg-w {
margin: 20px 0 0 !important;
}


#note01.bg-w p {
font-size: 15.9px;
line-height: 1.4em;
margin-bottom: 5px;
}

.bg-w h2 .notes {
margin: 0 0 0 30px;
}

.bg-w ol {
margin: 0;
}

.bg-w ol li {
width: 400px;
float: left;
margin: 0 15px 10px 0;
text-align: center;
border-radius: 6px;
}

.bg-w ol li:last-child {
margin: 0 0 10px 0;
}

.bg-w ol li p {
font-size: 16px;
}

.bg-w ol li.ex {
border: 1px solid #fbb400;
}

.bg-w ol li.ps {
border: 1px solid #063596;
}

.bg-w .notes {
margin: 0;
}

.question {
margin: 0 0 20px;
}

.question span {
display: block;
width: 260px;
float: left;
line-height: 38px;
font-size: 14px;
}

.question .unit {
display: inline-block;
width: auto;
float: none;
margin-left: 10px;
vertical-align: -18px;
} 

.answer {
width: 640px;
float: right;
}

.answer.col1 {
width: 100%;
}

.radio {
width: 150px;
float: left;
}

.radio label {
padding-bottom: 10px;
}

.inquiry-info {
border: 1px solid #999;
padding: 20px;
text-align: center;
margin: 30px auto 0 !important;
}

.inquiry-info img {
margin: 0 0 10px !important;
}

.inquiry-info p {
font-size: 80%;
margin: 0;
color: #000;
}

.inquiry-info p br {
display: block !important;
}

.form {
width: 100%;
margin-top: -30px;
}

.form .item,
.form .item > label {
line-height: 32px;
display: block;
font-weight: bold;
color: #000;
font-size: 16px;
}

.bottom-notes {
color: #808080;
font-size: 12px;
text-align: center;
margin-top: 40px;
}

.required {
border-radius: 4px;
padding: 3px;
color: #d72b81;
font-size: 80%;
margin-left: 15px;
margin-right: 3px;
font-weight: bold;
}

.regist .form .item {
width: 170px;
display: block;
float: left;
}

.contents.regist .form input {
width: 80% !important;
height: 18px\9;
}

.contents.regist .form .btn.input input {
height: 61px\9;
}

.contents.regist .form .btn.input input {
width: 480px !important;
}

.regist .form .pref-name {
font-size: 14px;
margin-top: 6px;
margin-right: 20px;
}

.regist .form .item.address {
float: none;
}

.regist .mwform-tel-field {
width: 100%;
margin-right: 20px;
}

.form .line {
margin: 0 0 10px;
height: 36.5px;
}

.form .line.pref {
margin-top: 15px;
height: 47.5px;
}

.form .line.address {
margin-top: 15px;
height: 75px;
}

.form .line.address .notes {
margin-bottom: 0;
}

.form .line.mt {
margin: 40px 0 0;
}

.mw_wp_form.mw_wp_form_input .brand,
.mw_wp_form.mw_wp_form_input .oar {
width: 800px;
margin-bottom: 10px;
}

.mw_wp_form.mw_wp_form_input .brand {
height: 18px\9;
}

.mw_wp_form.mw_wp_form_input ul {
margin-top: 25px;
}

.mw_wp_form.mw_wp_form_input .error {
font-size: 14px;
font-weight: bold;
color: #fff !important;
background-color: #1b2088 !important;
border-radius: 4px;
padding: 1px 10px;
margin: 0;
margin-top: 5px\9;
display: inline-block;
height: 30px;
line-height: 28px;
text-align: center;
}

.mw_wp_form.mw_wp_form_input .post-code .error {
display: inline-block;
width: 220px !important;
margin-left: 10px;
}

.mw_wp_form.mw_wp_form_input .btn-area {
width: 840px;
margin: 0 auto;
}

.mw_wp_form.mw_wp_form_input .btn-area .link {
margin: 0 20px 0 0;
width: 300px;
float: left;
}

.order .mw_wp_form.mw_wp_form_input .form.order input#pic {
width: 100% !important;
margin-bottom: 7px !important;
height: 18px\9;
}

.mw_wp_form.mw_wp_form_input input.order_confirm {
background: url(../assets/img/btn_order_confirm.png) no-repeat;
width: 480px;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.mw_wp_form_preview .btn_correct {
background: url(../assets/img/btn_order_confirm.png) no-repeat;
width: 480px;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.order.confirm .btn_correct {
background: url(../assets/img/btn_order_correct.png) no-repeat;
width: 300px;
float: left;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.order.confirm .privacypolicy-check {
display: none;
}

.mwform_btn {
width: 480px;
height: 61px;
border: none;
}

.mw_wp_form.mw_wp_form_input .regist-confirm {
background: url(../assets/img/btn_confirm.png) no-repeat left top;
width: 480px !important;
height: 61px;
border: none;
border-radius: 0;
text-indent: -9999px\9;
color:transparent;
}

.mw_wp_form_preview .form,
.mw_wp_form_preview .form p {
font-size: 18px;
color: #000;
}

.mw_wp_form_preview .form .item {
display: inline-block;
}

.mw_wp_form_preview .notes {
display: none;
}

.mw_wp_form_preview .form .line.mt {
margin: 40px 0 70px;
}

.mw_wp_form_preview .btn.input {
width: 840px;
margin: 0 auto;
}

.mw_wp_form_preview .regist-confirm {    
background: url(../assets/img/btn_submit.png);
background-repeat: no-repeat;
width: 480px;
height: 61px;
margin-right: 20px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.mw_wp_form_preview .btn.input .back {
background: url(../assets/img/btn_back.png);
background-repeat: no-repeat;
width: 300px;
float: left;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.mwform_btn.submit {
background: url(../assets/img/btn_submit.png);
margin: 0 0 0 20px;
}

.privacypolicy-check {
width: 480px !important;
margin: 70px auto 0 !important;
}

.privacypolicy-check .mwform-checkbox-field-text {
font-size: 16px;
margin-right: 20px;
}

.privacypolicy-check #privacypolicy-check1-1,
.privacypolicy-check #privacypolicy-check2-1 {
width: 25px !important;
float: left;
height: 15px;
line-height: 15px;
vertical-align: 2px !important;
}

.mw_wp_form_preview .privacypolicy-check {
display: none;
}

.form.order .item {
width: auto;
}

.form.order #email_hidden {
display: block !important;
margin: 10px 0;
}

.form.order li {
border-top: 1px solid #ccc;
border-bottom: none !important;
padding-top: 20px;
padding-bottom: 20px;
}

.form.order .choices .mwform-checkbox-field {
display: block;
margin-left: 0;
}

.form.order .choices input {
width: 20px !important;
}

.form.order .vta {
vertical-align: -9px;
}

.form.order .textarea {
margin-top: 10px;
}

.form.order .textarea textarea {
width: 100%;
}

.form.order .btn-area {
width: 794px;
text-align: center;
margin: 10px 0 50px;
}

.form.order label {
font-size: 16px;
}

.form.order .order_confirm {
background: url(../assets/img/btn_order_confirm.png);
width: 480px;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.order.confirm .form.order .order_confirm {
background: url(../assets/img/btn_order_submit.png);
width: 480px;
height: 61px;
color: transparent;
border: none;
text-indent: -9999px\9;
}

.mwform_btn.order_confirm_back {
background: url(../assets/img/btn_back.png);
text-indent: -9999px\9;
}

.form.order .ank .item {
display: block;
width: 200px !important;
float: left;
}

.form.order .ank input {
width: 50px !important;
height: 18px\9;
}

.form.order .ank .error {
margin-left:10px;
}

.order.confirm .form.order .btn-area {
width: 805px;
}

.cth-w {
background: #fbb400;
color: #fff;
padding: 5px 10px;
font-size: 80%;
margin: 0 10px;
border-radius: 4px;
}

.cth-w.ps {
background: #063596;
}

.radio-field {
display: inline-block;
}

.preview-area {
background: #ccc;
text-align: center;
height: 300px;
padding: 50px;
margin: 0 0 50px;
}

.btn-area {
margin: 50px 0;
}

.btn-area .link {
display: inline-block;
float: left;
margin: 0 30px 0 0;
}

.lead {
text-align: center;
margin: 30px 0;
font-size: 16px;
line-height: 2;
color: #000;
}

.review .tab {
height: 50px;
overflow: hidden;
display: table;
margin: 0;
}

.review .tab li {
width: 237px;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ebebeb;
font-weight: bold;
border-left: 1px dotted #000;
}

.review .tab .tab1 {
border-left: none;
}

.review .tab .tab3 a {
background: url(../assets/img/icon_01.png) no-repeat left center;
padding-left: 30px;
}

.review .tab .tab3:hover {
background-color: #cecece;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
color: #fff;
}

.review .tab .tab3:hover a {
background: url(../assets/img/icon_01_on.png) no-repeat left center;
color: #fff;
}

.review .tab .tab4 {
width: 238px;
}

.review .tab .tab4:hover {
background-color: #f4e6c2;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
color: #fff;
}

.review .tab li a {
text-decoration: none;
}

.review .tab li.current {
color: #fff;
border: none;
}

.review .tab .tab1:hover {
background-color: #d92b84;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
color: #fff;
}

.review .tab .tab1.current {
background-color: #d92b84;
}

.review .tab .tab2:hover {
background-color: #1d2089;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
color: #fff;
}

.review .tab .tab2.current {
background-color: #1d2089;
}

.review .tab li:hover {
cursor: pointer;
}

.review .tab li.select {
background: #b3edf2;
}

.contents.review .tab_p {
font-size: 14px;
line-height: 2;
color: #666;
margin: 0 0 35px;
text-align: center;
}

.contents.review {
padding: 35px 35px 2px;
}

.contents.review .tab_p .s {
font-size: 12px;
}

.contents.review .tab_p .n {
font-size: 12px;
color: #000;
float: right;
padding-right: 80px;
}

.contents.review .btn-area {
text-align: center;
}

.contents.review .btn-area .btn.column2 {
float: none;
}

.contents.regist .mwform-tel-field input,
.contents.regist input.post-code {
width: 100px !important;
}

.review .tabSection .contents {
padding: 50px;
margin: 0;
width: 852px;
background: #fff;
border-top: 1px dotted #bbb;
border-bottom: 1px dotted #bbb;
}

.review .tabSection .contents .content img {
margin: 0 0 15px;
}

.enclose {
border: 2px dotted #1d2089;
border-radius: 16px;
padding: 30px;
}

.enclose .voice {
padding-top: 20px;
margin-bottom: 0;
}

.tab2 .enclose .voice {
border-top: none !important;
margin-top: 0 !important;
margin-bottom: 20px;
padding-top: 5px;
}

.enclose .voice li {
margin: 0 0 10px;
}

.enclose .pluscare {
color: #89daea !important;
font-size: 16px;
font-weight: bold;
margin: 0;
}

.enclose .premium {
color: #a9c4e3 !important;
font-size: 16px;
font-weight: bold;
margin: 0;
}

.tab1 .enclose {
border: 2px dotted #df0076;
}


.detail ul li {
font-size: 80%;
margin: 15px;
}

.detail .img-list li {
margin: 0;
width: 398px;
float: left;
}

.detail .img-list li img {
}

.detail p {
text-align: center;
}

.caption {
font-weight: bold;
font-size: 14px;
margin: 15px 0 5px;
display: block;
}

.voice {
border-top: 1px solid #666;
margin: 20px 0 50px;
list-style-type: disc;
list-style-position: inside;
}

.voice li {
margin: 20px;
font-size: 80%;
line-height: 1.8;
}


@keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-webkit-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-moz-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-o-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}
#codeconCSS {
animation: Animate-CSS 5s;
-webkit-animation: Animate-CSS 5s;
-moz-animation: Animate-CSS 5s;
-o-animation: Animate-CSS 5s;
width: 70%;
height: 100px;
position: absolute;
background-color: #55a69f;
}
@keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-webkit-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-moz-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-o-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}
#codeconjQuery {
animation: Animate-jQuery 5s;
-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;
width: 50%;
height: 100px;
position: absolute;
background-color: #99856d;
}



@keyframes Animate-jQuery {
from {
width: 10px;
}
to {
width: 50%}
}
@-webkit-keyframes Animate-jQuery {
from {
width: 10px;
}
to {
width: 50%
}
}
@-moz-keyframes Animate-jQuery {
from {
width: 10px;
}
to {
width: 50%
}
}
@-o-keyframes Animate-jQuery {
from {
width: 10px;
}
to {
width: 50%
}
}
#codeconCakePHP {
animation: Animate-CakePHP 5s;
/*-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;*/
width: 60%;
height: 50px;
position: absolute;
background-color: #2f96b4;
}

@keyframes Animate-CakePHP {
from {
width: 10px;
}
to {
width: 60%
}
}


.codeconSkillArea {
z-index: 1;
float: left;
//position: absolute;
/*margin-top: 5px;*/
margin-left: 10px;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
white-space: nowrap;
line-height: 30px;
}
.PercentText {
z-index: 3;
position: relative;
padding-right: 10px;
float: right;
text-shadow: none;
color: #fff;
//font-family: Lato-Regular, sans-serif;
font-size: 12px;
line-height: 30px;
}

.w-half .PercentText,
.w-half .codeconSkillArea {
line-height: 20px;
}




.footer {
background-color: #e6e6e6;
bottom: 0;
width: 100%;
height: auto !important;
}

.footer .footer-inner {
position: relative;
width: 90%;
margin-right: 5%;
margin-left: 5%;
padding: 64px 0 28px;
text-align: center;
}

.footer .footer-inner img {
float: left;
}

.footer .footer-inner .pagetop {
position: absolute;
width: 30px;
right: 10px;
top: 20px;
}

.footer .pagetop a {
position: relative;
display: block;
width: 30px;
height: 16px;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.footer .footer-nav {
float: right;
margin-top: 12px;
margin-right: 5px;
line-height: 1;
}

.footer .footer-nav:after {
clear: both;
}



.footer .footer-nav li {
display: inline-block;
margin: 0 10px;
}

.footer .footer-nav li a {
display: block;
color: #666;
font-size: 12px;
text-decoration: none;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

.footer .footer-nav li a:hover {
color: #000;
}

.footer .copyright {
color: #666;
text-align: center;
font-size: 10px;
letter-spacing: 0.5px;
}
.footer .copyright br {
display: none;
}


@media only screen and (max-width:800px) {

}

@media all and (orientation: landscape) and (max-width: 750px) {
html {
font-size: 93.75%;
}
.header .logo {
width: 23% !important;
}
.sign-up h2 br,
.copyright br {
display: none !important;
}
.inquiry-info {
width: 80%;
}
.contents.regist .form input {
width: 100% !important;
}
.regist .form p.notes {
margin-left: 0 !important;
}
.contents.regist .form .btn.input input {
width: 240px !important;
}
.footer .footer-nav li {
margin-bottom: 2% !important;
}
.footer .footer-nav {
margin-top: 2% !important;
margin-bottom: 0 !important;
}
}

@media only screen and (max-width:768px) {
.pc {
display: none;
}
.sp {
display: block;
}
html {
margin-top: 0 !important;
}
html #wpadminbar {
display: none;
}
h2 img {
width: 100% !important;
}
.header {
height: 110px;
}
.header .info-logo {
float: right !important;
margin-right: 4%;
margin-bottom: 4%;
}
.header .nav-tools {
float: right;
width: 60% !important;
padding-top: 4%;
margin-right: 4%;
}
.header .logout {
width: 38% !important;
}
.contents {
margin: 0 !important;
}
.contents.regist h2 {
text-align: right !important;
}
.contents.regist h2 .notes {
left: 0 !important;
}
.contents.regist h2 img {
width: 100% !important;
margin-bottom: 10px !important;
}
.contents.regist .notes {
bottom: -29px !important;
}
.contents.regist input {
width: 100% !important;
}
.contents.regist .form .mwform-tel-field input {
width: 23.2% !important;
}
.contents.regist .mwform-zip-field .post-code {
width: 28% !important;
}
.contents.regist .form p.notes {
margin-left: 0 !important;
}
.contents.regist .form .btn.input input {
width: 240px !important;        
}
.header {
position: inherit;
}
.header .logo {
width: 30%;
float: left;
margin-left: 2% !important;
}
.header-inner {
width: 100%;
}
.div_text input {
width: 100% !important;
}
#wpmem_login {
width: 100%;
min-height: 310px;
}
.login #wpmem_login label {
margin-bottom: 5px;
}
.login #wpmem_login .div_text, #wpmem_login .div_text {
margin-bottom: 0;
}
.login #wpmem_login fieldset {
height: 320px !important;
}
.login #wpmem_login .button_div .buttons {
background-image: url(../assets/img/btn_login_sp.png) !important;
background-repeat: no-repeat !important;
background-size: 240px !important;
border-radius: 0 !important;
height: 60px;
}
.login #wpmem_login legend, .changepw #wpmem_login legend, #wpmem_login legend {
margin-top: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
font-size: 16px !important;
}
.login #wpmem_login .button_div {
bottom: 0 !important;
}
.login #wpmem_login .div_text input {
width: 100% !important;
}
.form .line.mt{
margin:55px 0 0;
}
.form .line.address {
height:auto;
}
.form.order .textarea textarea {
width: 100%;
border: 1px solid #ccc;
}
.mw_wp_form.mw_wp_form_input .error {
margin-top: 8px;
}
.contents.order .set-img {
width: 100%;
}
.regist .form .item,
.regist .form input {
width: 100% !important;
}
.changepw .button_div {
width: 240px !important;
margin: 15px auto 0 !important;
text-align: center;
}
.changepw #wpmem_login .button_div input {
background-image: url(../assets/img/btn_pwdchange_sp.png) !important;
background-repeat: no-repeat !important;
background-size: 240px !important;
border-radius: 0 !important;
width: 240px;
height: 60px;
margin: 0 auto;
color: transparent;
border: none;
}
.privacypolicy-check .mwform-checkbox-field-text {
font-size: 13px;
}
.lead {
line-height:1.7 !important;
font-size:80% !important;
text-align:left !important;
}
.lead br,
.contents.review .tab_p br {
display:none;
}
#note01.bg-w p {
font-size:13px !important;
}
.order.confirm #note01.bg-w p {
font-size:18px !important;
}
#note01.bg-w .purpose {
font-size:13px !important;
}
.box {
width: 94%;
margin: 0 auto !important;
padding: 3%;
position: relative;
}
.inquiry-info {
margin: 0 2.5%;
padding: 5%;
}
.inquiry-info img {
width: 100%;
}
.inquiry-info p br,
.copyright br {
display:block;
}
.order.confirm #note01.sample .sample-set .group {
left: 0 !important;
top: auto !important;
font-size: 24px !important;
font-weight: bold !important;
position: absolute;
}
.form.order .ank .item {
width: 100% !important;
}
.completed .inquiry-info, .order-completed .inquiry-info {
width: 90% !important;
padding: 5% !important;
}
.completed .txt-area p, .order-completed .txt-area p {
font-size: 14px;
text-align: left;
line-height: 1.6;
}
.footer-contents {
text-align: center;
}
.login #wpmem_login .div_text {
width: 96% !important;
float: none !important;
margin: 0 2% !important;
}
.login {
margin-bottom: 20px;
}
.login #wpmem_login .button_div {
left: 0 !important;
width: 100%;
text-align: center !important;
}
.login {
margin: 0;
width: 90% !important;
margin: 0 5% 20px !important;
float: left;
padding-right: 0 !important;
}
.voice {
margin: 20px 0 0 !important;
}
.voice li {
margin: 3% !important;
}
.sign-up {
float: right;
margin-right:0;
width: 100% !important;
}
.bg-w {
padding: 6% 3% !important;
margin: 0 !important;
}
.contents {
width: 93%;
background: #f9f9f9;
margin: 30px 0 0;
padding: 7% 4% 5% !important;
}
.review .tabSection .contents {
width: 92% !important;
padding: 4% !important;
border-bottom: none !important;
}
.review .tabSection .contents .content img {
width: 100%;
}
.review .tab li,
.review .tab li.tab4 {
width: 98% !important;
padding: 1.5%;
height: 30px !important;
line-height: 30px !important;
border-left: none !important;
}
.choices {
line-height:1.6;
}
.contents.order h2 img {
width: 90%;
height: auto;
}
.contents.review .tab_p {
text-align: left;
}
.contents.review .tab_p .n {
padding-right: 0 !important;
}
.contents.order .flow h3 {
margin-bottom: 0 !important;
}
#note01 {
margin-top: 0 !important;
}
.flow img {
width: 90%;
height: auto;
}
.flow h3 img {
width: 80%;
}
.flow img.sp {
display: block;
width: 35%;
float: left;
}
.flow img.pc {
display: none;
}
.flow ol {
width: 60%;
float: right;
margin: 0 !important;
list-style-position: inside;
}
.flow ol li {
width: 100%;
float: left;
text-align: left !important;
margin: 0 0 10px;
font-size: 14px;
list-style-type: decimal;
list-style-position: inside;
height: 60px;
margin-top: 40px !important;
}
.flow ol li.li_1, .flow ol li.li_2,.flow ol li.li_3,.flow ol li.li_4 {
width: 100%;
margin: 0;
line-height: 1.6;
}
.flow ol li br {
display: none;
}
.form .item {
line-height: 1.6;
}
.required {
white-space: nowrap;
margin-left: 0;
}
.contents.order h3 .notes,
.contents h2 .notes {
bottom: -20px !important;
}
.mw_wp_form.mw_wp_form_input  input {
width: 100% !important;
padding: 3px !important;
}
.mw_wp_form .horizontal-item + .horizontal-item {
margin-left: 0 !important;
}
.form p.notes {
margin-left: 0;
}
.flow ol li:first-child,
.flow ol li:last-child {
margin-left: 0 !important;
margin-right: 0 !important;
}
.enclose {
padding: 5% 3% !important;
}
.login #wpmem_login .button_div .buttons {
width: 240px !important;
margin: 0 auto !important;
border-radius:0;
background-size: contain;
}
.changepw {
margin-top: 0;
}
.changepw #wpmem_login {
width: 90% !important;
margin: 5% !important;
}
.changepw #wpmem_login .div_text {
width: 100% !important;
margin: 0 0 15px !important;
}
.changepw #wpmem_login {
min-height: 275px;
}
.contents.order .btn-area,
.contents.order .btn-area input {
width: 100% !important;
}
.tab.bottom {
display: none !important;
}
.form .line {
height: auto;
}
.sign-up h2 {
line-height: 1.6 !important;
margin-bottom: 15px !important;
}
.sign-up h2 br {
display: block;
}
.sign-up .btn {
width: 240px !important;
margin: 0 auto !important;
}
.privacypolicy-check {
width: 100% !important;
margin: 0 !important;
}
.completed p, .order-completed p {
text-align: left !important;
font-size: 14px !important;
}
.completed .inquiry-info p, .order-completed .inquiry-info p {
text-align: center !important;
line-height: 1.6;
}
.contents.order .form.order .btn-area {
width: 240px !important;
margin: 20px auto !important;
}
.completed .inquiry-info span,
.order-completed .inquiry-info span {
display: block;
}
.mw_wp_form_input .btn.input {
width: 240px !important;
background-size: 100%;
}
.mw_wp_form.mw_wp_form_input input.order_confirm {
background-image: url(../assets/img/btn_order_confirm_sp.png) !important;
background-repeat: no-repeat !important;
background-size: 240px !important;
border-radius: 0 !important;
}
.changepw #wpmem_login label {
width: 100%;
margin-bottom: 0;
}
.changepw #pass2 {
margin-bottom: 20px;
}
.sample .sample-set .group {
background-color: #fff !important;    
padding: 0 !important;   
}
#note01.sample .sample-set {
background-image: none !important;
background-size: 100% !important;
height: 540px !important;
position: relative;
}
#note01.sample .sample-set .radio-field .sp {
width: 100% !important;
margin-bottom: 10px;
}
#note01.sample .sample-set .radio-field  {
left: 0 !important;
top: 10px !important;
}
#note01.sample .sample-set .radio-field .mwform-radio-field.horizontal-item {
width: 89% !important;
height: 50px !important;
float: left;
position: relative;
margin-bottom: 8px !important;
padding-left: 10% !important;
border: 1px solid #4d4d4d;
border-radius: 6px;
}
.order .sample .sample-set .radio-field .mwform-radio-field span {
padding-left: 0.5em;
font-size: 95%;
}
#note01.sample .sample-set .radio-field .error {
border: none;
}
#note01.sample .sample-set .radio-field .horizontal-item + .horizontal-item {
margin-top: 5px !important;
margin-left: 0 !important;
}
#note01.sample .sample-set .radio-field label {
color: #000 !important;
font-size: 16px !important;
line-height: 1 !important;
line-height: 50px !important;
}
#note01.sample .sample-set .mwform-radio-field.horizontal-item {
position: relative;
}
#note01.sample .sample-set .radio-field input {
width: 15px !important;
position: absolute;
left: 5px !important;
bottom: 10px !important;
}
#note01.sample .sample-set #sample-2,
#note01.sample .sample-set #sample-3,
#note01.sample .sample-set #sample-4,
#note01.sample .sample-set #sample-5,
#note01.sample .sample-set #sample-6 {
margin-left: 5px !important;
}
#note01.sample .sample-set #sample-3 + span,
#note01.sample .sample-set #sample-4 + span,
#note01.sample .sample-set #sample-5 + span,
#note01.sample .sample-set #sample-6 + span {
color: #cb8515 !important;
}
.order.confirm #note01.sample .sample-set {
height: 210px !important;
border: none !important;
text-align: center;
}
.order.confirm #note01.sample .sample-set .radio-field {
width: 100% !important;
left: 0 !important;
line-height: 1.4 !important;
top: -10px !important;
font-size: 20px !important;
}
.order.confirm #note01.sample .sample-set .radio-field .group {
border: 3px solid #1c1f86 !important;
border-radius: 8px;
padding: 4px;
}
.order.confirm #note01.sample .sample-set .radio-field img {
width: 100% !important;
margin-bottom: 15px !important;
}
.contents.order .btn-area input {
margin-bottom: 15px !important;
}
.order.confirm #note01 .btn_correct {
background-image: url(../assets/img/btn_order_correct_sp.png) !important;
background-repeat: no-repeat !important;
background-size: 240px !important;
border-radius: 0 !important;
}
.order.confirm #note01 .order_confirm {
background-image: url(../assets/img/btn_order_submit_sp.png) !important;
background-repeat: no-repeat !important;
background-size: 240px !important;
border-radius: 0 !important;
}
.form.order .item {
line-height: 1.6;
}
.pagetop img {
display:none;
}
.mw_wp_form.mw_wp_form_input .regist-confirm {
background-image: url(../assets/img/btn_confirm_sp.png) !important;
background-size: contain !important;
width: 240px !important;
}
.mw_wp_form_preview .btn.input {
width: 240px !important;
}
.mw_wp_form_preview .btn.input .back {
background-image: url(../assets/img/btn_back_sp.png) !important;
width: 240px !important;
height: 45px !important;
margin-bottom: 20px !important;
}
.mw_wp_form_preview .regist-confirm {
background-image: url(../assets/img/btn_submit_sp.png) !important;
background-size: contain !important;
width: 240px !important;
height: 45px !important;
}

.bottom-notes {
line-height: 1.6;
}
.footer .footer-inner img {
float: none !important;
margin-bottom: 15px;
}
.footer .footer-nav {
float: none;
margin-top: 0;
margin-left: 8%;
margin-bottom: 6.4%;
}
.footer .footer-nav li {
display: block;
margin-bottom: 4.637681159420301%;
text-align: left;         
}
.footer .footer-nav li a {
position: relative;
display: inline-block;
font-size: 1.35rem !important;
line-height: 1;
padding-left: 12px;
}
.footer .footer-nav li a::before {
position: absolute;
top: 50%;
left: 0;
margin-top: -3px;
content: "";
display: inline-block;
width: 5px;
height: 5px;
border-top: 1px solid #666;
border-right: 1px solid #666;
border-radius: 1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.footer .pagetop {
position: static;
margin-bottom: 10.4%;
}
.footer .pagetop a {
width: 30px;
height: 30px;
margin: 0 auto;
background: none;
}
.footer .pagetop a::after {
position: absolute;
top: 10px;
left: 4px;
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-radius: 1px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.footer .footer-logo {
float: none;
width: 70.1333333333333%;
margin: 0 auto 5.0666666666667%;
}
.footer .copyright {
font-size: 1rem;
line-height: 1.8;
}
.footer .copyright br {
display: block;
}
}

.hidden {
display: none !important;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

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

.clearfix:after {
clear: both;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: "" !important;
}

abbr[title]:after {
content: "" !important;
}

/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/

a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/

thead {
display: table-header-group;
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
.contents {
position: relative !important;
}
}