/* リセットCSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5要素の表示をブロックに */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* ボディの行高さをリセット */
body {
    line-height: 1.5;
    background-color: rgb(200, 200, 200);
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    color: rgb(77, 77, 77);
    text-size-adjust: none;
    font-size: 28px;
}

input {
    font-family: メイリオ, Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/* リストのマーカーを削除 */
ol, ul {
  list-style: none;
}

/* 引用符を削除 */
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

/* テーブルの境界を統合 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
    color: #067dac;
    -webkit-tap-highlight-color: #99CCFF;
    text-decoration: underline;
}

img {
    max-width: 100%;
}

label {
    width: 100%;
    max-width: 100%;
}
.wrapper {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}

.banner {
    display: flex;
    align-items: center;     /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    height: 60px;             /* 必要に応じて高さ指定 */
    background-color: #54A7B9;
  }
  .banner > h2 {
    font-size: 22px;
    color: #FFFFFF;
    font-weight: normal;
    margin: 0;
  }

  .form_main {
    text-align: left;
    margin: 0 auto;
    max-width: 640px;
    background: #fff;
  }
  .nav_flow {
    width: 100%;
    overflow: hidden;
  }
  .nav_flow > ul {
    margin: 0;
    height: 35px;
    overflow: hidden;
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
  }
  .nav_flow li {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    height: 35px;
    list-style: none;
    position: relative;
    background: #C5C5C5;
    color: #fff;
    overflow: hidden;
    font-weight: normal;
    font-size: 10px;
    text-align: center;
    color: #4a4a4a;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 45px;
  }
  .nav_flow li:not(:first-child)::before {
    display: block;
    content: "";
    position: absolute;
    top: -8px;
    left: -0px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 27px 0 30px 42px;
    border-color: transparent transparent transparent #fff;
    z-index: 1;
    -webkit-backface-visibility: hidden;
  }
  .nav_flow li.now + li:after {
    border-color: transparent transparent transparent #B7E4EA;
  }
  .nav_flow li:not(:first-child)::after {
    display: block;
    content: "";
    position: absolute;
    top: -8px;
    left: -4px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 27px 0 30px 42px;
    border-color: transparent transparent transparent #C5C5C5;
    z-index: 1;
    -webkit-backface-visibility: hidden;
  }
  .nav_flow li.now{
    background: #B7E4EA;
    color: #333;
  }
  .nav_flow li:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
  }
  .nav_flow li:last-child {
    padding-right: 15px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form_messagebox {
    padding: 1.0em;
    font-size: 0.7em;
}

.form_box {
    background-color: #EBEBEB;
    font-size: 0.9em;
}
.form_inputbox {
    font-size: 1.0em;
    padding-top: 0.7em;
    padding-right: 1.2em;
    padding-bottom: 0.5em;
    padding-left: 1.2em;
}
.form_inputbox input[type="text"], .form_inputbox input[type="email"], .form_inputbox input[type="tel"], .form_inputbox input[type="number"], .form_inputbox input[type="date"], .form_inputbox textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0;
    border: 1px solid #666666;
    /* box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2) inset; */
    width: 90%;
    padding: 0.7em;
    margin-top: 0.3em;
    margin-right: 0;
    margin-bottom: 0.7em;
    margin-left: 0;
    font-size: 1em;
    font-weight: normal;
}
.form_inputbox select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 1.0em;
    margin-top: 0.3em;
    margin-right: 0;
    margin-bottom: 0.7em;
    margin-left: 0;
    border: 1px solid #666666;
    background-image: url(https://yss-security.com/wp-content/themes/Theme_YSS/images/ys-camera/select.png);
    background-repeat: no-repeat;
    background-position: right center;
    cursor: pointer;
    width: 96.0% !important;
    padding-top: 0.6em;
    padding-right: 0.7em;
    padding-bottom: 0.6em;
    padding-left: 0.7em;
}
.form_inputbox input.boxShort {
    width: 10em;
}
.form_box h4 {
    font-size: 1.2em;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 0.3em;
    font-weight: bold;
}
.form_box h3 {
    font-size: 1.2em;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 1em;
    font-weight: bold;
    color: #009BB4;
}
.form_box h5 {
    font-size: 0.9em;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.3em;
    font-weight: bold;
}
.require {
    color: #FFF;
    background-color: #B71271;
    font-weight: bold;
    font-size: 0.6em;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: 7px;
    vertical-align: middle;
    padding-top: 2px;
    padding-right: 6px;
    padding-bottom: 2px;
    padding-left: 6px;
}
.radio_img + label {
    position: relative;
    width: 100%;
    max-width: 23em; /* 元の幅 */
    height: auto; /* 高さは画像に応じて調整されるなら auto 推奨 */
    aspect-ratio: 23 / 7.19; /* 比率維持 */
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    font-size: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 0 0.4em 0;
}
#suipure_plan + label {
    background-image: url(https://s-olife.com/images/suipure/suipure_off.png);
}
#nanoluxeset_plan + label {
    background-image: url(https://s-olife.com/images/suipure/nanoluxe_off.png);
}

#suipure_plan:checked + label {
    background-image: url(https://s-olife.com/images/suipure/suipure_on.png);
}
#nanoluxeset_plan:checked + label {
    background-image: url(https://s-olife.com/images/suipure/nanoluxe_on.png);
}

.form_comment {
    font-size: 0.7em;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
}
.form_boxtype1 {
    background-color: #D6D6D6;
    border-radius: 6px;
    padding: 1em;
    margin-bottom: 0.5em;
}
.form_boxtype1 h4 {
    font-size: 1.1em;
    margin-top: 0px;
    margin-bottom: 0.5em;
}
.form_boxtype1 h4 span {
    font-size: 90%;
}
.form_boxtype1 p {
    font-size: 0.8em;
    padding-left: 2em;
}
.form_redtext {
    color: #FF0000;
    margin-bottom: 0.4em;
    margin-top: -0.4em;
}
.form-mtext {
    font-size: 0.9em;
    text-align: left;
    font-weight: normal;
}

.form_sentakubox {
    background-color: #FFFFFF;
    border: 1px solid #333333;
    padding: 1em;
}
.radio_l {
    display: none;
    width: 1em;
    height: 1em;
}
.radio_l + label {
    cursor: pointer;
    padding-left: 2.1em;
    position: relative;
    margin-right: 0.9em;
    display: inline-block;
    font-weight: normal;
    font-size: 0.9em;
    margin-bottom: 0.6em;
}
.radio_l + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.2em;
    left: 0.8em;
    width: 0.95em;
    height: 0.95em;
    background: #fff;
    border: 1px solid #999;
    border-radius: 50%;
}
.radio_l:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.39em;
    left: 1.0em;
    width: 0.65em;
    height: 0.65em;
    background: #009BB4;
    border-radius: 50%;
}
.form_stext {
    font-size: 0.8em;
    text-align: left;
    font-weight: normal;
}
.form_torikime {
    overflow: scroll;
    height: 140px;
    border: 1px solid #666666;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    padding-left: 5px;
    width: 97%;
    background-color: #FFFFFF;
    margin-bottom: 10px;
}
.checkbox_l {
    display: none;
    width: 1em;
    height: 1em;
}
.checkbox_l + label {
    cursor: pointer;
    padding-left: 1.4em;
    position: relative;
    margin-right: 0.9em;
    display: inline-block;
    font-weight: normal;
    font-size: 1.0em;
}
.checkbox_l + label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.2em;
    left: 0.0em;
    width: 0.9em;
    height: 0.9em;
    background: #fff;
    border: 1px solid #999;
    border-radius: 4px;
}
.checkbox_l:checked + label::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.0em;
    left: 0.2em;
    width: 0.4em;
    height: 0.8em;
    transform: rotate(40deg);
    border-bottom: 0.25em solid #009BB4;
    border-right: 0.25em solid #009BB4;
}
#form-post:disabled {
    background-color: #7FBC21;
    cursor: not-allowed;
    color: #CCCCCC;
}
#form-post {
    -webkit-appearance: none;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0.6em;
    border: 1px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
    cursor: pointer;
    background-color: #7FBC21;
    width: 11em;
    color: #FFF;
}
input[disabled] {
    border: 1px solid #dbd9d9;
    background: #eaeaea;
    box-shadow: none;
}
.telButton {
    text-align: left;
    font-size: 12px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #009BB2;
    margin-top: 20px;
}

.form_footer {
    color: #FFFFFF;
    font-size: 16px;
    background-color: #666666;
    text-align: center;
    padding-top: 2.5em;
    padding-bottom: 3em;
    line-height: 1.5;
}

.formfootermenu {
    margin-bottom: 2em;
}

.formfootermenu a {
    color: #FFFFFF;
    text-decoration: none;
}

.formError {
    position: absolute;
    display: block;
    cursor: pointer;
    text-align: left;
    opacity: 0;
}
.formError {
    z-index: 990;
}
.formError .formErrorContent {
    width: 100%;
    background: #ee0101;
    background: #F7CCCC;
    position: relative;
    color: #fff;
    color: #000;
    min-width: 120px;
    font-size: 12px;
    border: 2px solid #ddd;
    box-shadow: 0 0 6px #000;
    -moz-box-shadow: 0 0 6px #000;
    -webkit-box-shadow: 0 0 6px #000;
    -o-box-shadow: 0 0 6px #000;
    padding: 4px 10px 4px 10px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    z-index: 991;
}
.formError .formErrorArrow {
    width: 15px;
    margin: -2px 0 0 13px;
    position: relative;
    z-index: 996;
}
.formError .formErrorArrow div {
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
    box-shadow: 0 2px 3px #444;
    -moz-box-shadow: 0 2px 3px #444;
    -webkit-box-shadow: 0 2px 3px #444;
    -o-box-shadow: 0 2px 3px #444;
    height: 1px;
    background: #ee0101;
    background: #F7CCCC;
    margin: 0 auto;
    line-height: 0;
    font-size: 0;
    display: block;
}
.formError .formErrorArrow .line10 {
    width: 13px;
    border: none;
}
.formError .formErrorArrow .line9 {
    width: 11px;
    border: none;
}
.formError .formErrorArrow .line8 {
    width: 11px;
}
.formError .formErrorArrow .line7 {
    width: 9px;
}
.formError .formErrorArrow .line6 {
    width: 7px;
}
.formError .formErrorArrow .line5 {
    width: 5px;
}
.formError .formErrorArrow .line4 {
    width: 3px;
}
.formError .formErrorArrow .line3 {
    width: 1px;
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
    border-bottom: 0 solid #ddd;
}
.formError .formErrorArrow .line2 {
    width: 3px;
    border: none;
    background: #ddd;
}
.formError .formErrorArrow .line1 {
    width: 1px;
    border: none;
    background: #ddd;
}

/* confirm */
.formtitle {
    padding-top: 0.8em;
    padding-left: 0.8em;
    font-size: 1.1em;
    font-weight: bold;
}
.formconfplan {
    background-color: #FFFFFF;
    font-weight: bold;
    font-size: 0.9em;
    padding-top: 0.7em;
    padding-right: 0.4em;
    padding-bottom: 0.7em;
    padding-left: 0.4em;
}
.formconfplan table {
    margin: 0.9ex;
    width: 96%;
    padding: 0px;
    border: 1px solid #CCCCCC;
}
.formconfplan table th {
    padding: 0.8em;
    text-align: left;
    background-color: #EBEBEB;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
}
.formconfplan table td {
    padding: 0.8em;
    text-align: left;
    vertical-align: top;
}
.formconfplan table td:last-child {
    text-align: right;
}
.formconfplan span:not(.txt_red) {
    font-size: 80%;
    font-weight: normal;
    text-align: right;
}
.formboxtype3 {
    background-color: #EBEBEB;
    margin: 0.8em;
    border-radius: 6px;
    padding: 0.5em;
}
.formconfbox {
    padding-top: 0.3em;
    font-size: 0.9em;
    font-weight: normal;
    padding-top: 0.7em;
    padding-right: 0.4em;
    padding-bottom: 0.7em;
    padding-left: 0.4em;
}
.formconfbox p {
    margin-top: 0.5em;
}
.form_value {
    font-weight: bold;
    font-size: 1em;
}
#form-edit {
    -webkit-appearance: none;
    font-weight: normal;
    font-size: 0.9em;
    padding: 0.6em;
    border: 1px;
    cursor: pointer;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
    margin-right: 0.9em;
    background-color: #C5C5C5;
    width: 6em;
}
.forminputbox {
    font-size: 1.0em;
    padding-top: 0.7em;
    padding-right: 1.2em;
    padding-bottom: 0.5em;
    padding-left: 1.2em;
}

.txt_red {
	color:red;
}
.txt_tax {
	font-size: 80%;
    font-weight: normal;
    text-align: right;
}
.form_torikime {
	font-size:12px;
}

.cov_check {
	border: 1px solid #666666;padding-top: 0.6em;padding-right: 0.7em;padding-bottom: 0.6em;padding-left: 0.7em;background-color:#fff;font-size: 1.0em;margin-top: 0.3em;margin-right: 0;margin-bottom: 0.7em;margin-left: 0;
}

@media screen and (max-width:640px)
{
	.form_messagebox {
		font-size:16px;
	}
	
	.checkbox_l + label {
		margin-right:0;	
	}
	.radio_l + label {
		font-size:0.6em;
	}
	.form_inputbox input[type="text"],
	.form_inputbox input[type="tel"],
	.form_inputbox input[type="email"]
	{
		font-size:0.6em;
	}
	.form_inputbox select {
		font-size:0.6em;
	}
	.form_box h4 {
		font-size:1em;
	}
	.form_box h3 {
		font-size:1em;
	}
	.form_boxtype1 p {
		padding-left:0;	
	}
	.cov_check {
		font-size: 0.6em;	
	}
}

.header_banner {
    margin: 0px;
    padding: 0em;
    color: #CCCCCC;
    font-weight: normal;
    width: 100%;
}
.head_logo {
    width: 30%;
    float: left;
}
#header {
    height: 100px;
    background: #fff;
}