body {
  margin: 0px;
  padding: 0px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  font-family: Hiragino Sans;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  font-weight: normal;
}
input,
select {
  -webkit-appearance: none;
  appearance: none;
  font-family: Hiragino Sans;
}
.select,
select {
  background-image: url("/image/insurance/select_allow.png");
  background-position: right 15px center;
  background-repeat: no-repeat;
  background-size: 13px 8px;
}
::placeholder {
  color: #aaa;
  font-family: Hiragino Sans;
}

.center {
  text-align: center;
}
.hide {
  display: none;
}

.w-20 { width: 20px; }
.flex { display: flex; }
.f_b { font-weight: bold; }
.mr_4 { margin-right: 4px;}

.circle {
  border-radius: 50%;
}

/** 文字色 */
.fc_black { color: #3a3a3a; }
.fc_darkgray { color: #666; }
.fc_gray { color: #bbb; }
.fc_white { color: #fff; }
.fc_blue { color: #6699FF; }
.fc_error { color: #f45454;}
.fc_primary_green { color: #3fc515; }
.fc_placeholder { color: #aaa; }
.fc_orange { color: #ff7200; }

.bgc_white { background-color: #fff; }
.bgc_error { background-color: #fcecec; }
.bgc_error2 { background-color: #f45454; }
.bgc_primary_green { background-color: #3fc515; }
.bgc_light_gray { background-color: #f2f4f4;}
.bgc_orange { background-color: #ff9c28; }
.bgc_lightGray { background-color: #e0e0e0; }

.bc_error { border: #f45454 1px solid !important; }

.pointer {
  cursor: pointer;
}

/* modal */
.modal_page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
}
.modal_body {
  width: 100%;
  height: calc(100% - 80px);
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}
.modal_iframe {
  width: 100%;
  height: 100%;
}


/** Datetimepicker */
/* カレンダー時間を除く */
.xdsoft_datetimepicker .xdsoft_datepicker {
  width: 200px;
}
/* 月選択部分 */
.xdsoft_datetimepicker .xdsoft_month {
  width: 70px;
}
.xdsoft_datetimepicker .xdsoft_label {
  font-size: 12px;
}
/* カレンダー日付部分*/
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
  font-size: 10px;
}
/* 時間選択部分 */
.xdsoft_datetimepicker .xdsoft_timepicker {
  width: 48px;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
    font-size: 10px;
}

/* LP */

/* TOP */
.catchcopy_area {
  padding-bottom: 20px;
}
.catchcopy_title {
  text-align: center;
}
.catchcopy_title_img {
  width: calc(100% - 60px);
  max-width: 374px;
}
.catchcopy_illust_img {
  width: 100%;
}
.recommend_point {
  padding: 0px 20px;
}
.recommend_point_img {
  max-width: 384px;
  width: 100%;
}

/* お悩み */
.probrem_area {
  background-color: #f2f4f4;
  margin-top: 20px;
}

/* 家族の保険相談でできること */
.cando_area {
  padding-top: 40px;
}
.cando_title_img {
  width: calc(100% - 50px);
  max-width: 580px;
}
.cando_point_area {
  padding: 20px 20px 10px 20px;
}
.cando_point_box:not(:last-of-type) {
  margin-bottom: 40px;
}
.cando_point_title_img {
  width: 100%;
  margin-bottom: 20px;
}
.cando_point_illust {
  width: 100%;
  text-align: center;
}
.cando_point1_illust_img {
  width: calc(100% - 58px);
  max-width: 360px;
}
.cando_point2_illust_img {
  width: calc(100% - 68px);
  max-width: 440px;
}
.cando_point3_illust_img {
  width: calc(100% - 27px);
  max-width: 460px;
}

/* おすすめの理由 */
.recomment_reason_area {
  padding-top: 30px;
  padding-bottom: 40px;
}
.recommend_reason_title_img {
  width: calc(100% - 136px);
  max-width: 436px;
}
.recommend_reason_title1_img {
  width: calc(100% - 162px);
  max-width: 320px;
}
.recommend_reason_title2_img {
  width: calc(100% - 86px);
  max-width: 470px;
}
.recommend_reason_title3_img {
  width: calc(100% - 72px);
  max-width: 490px;
}
.recommend_reason_illust {
  margin-top: 20px;
  width:100%;
}

/* ご相談の流れ */
.discussion_area {
  margin-top: 40px;
}
.discussion_title_img {
  width: calc(100% - 160px);
  max-width: 385px;
}
.discussion_flow_area {
  margin-top: 8px;
  padding: 20px;
}
.discussion_flow {
  display: flex;
}
.discussion_flow_allow {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}
.discussion_flow_allow_img {
  width: 25px;
  height: 17px;
}

/* よくある質問 */
.question_area {
  padding-top: 40px;
  padding-bottom: 33px;
}
.question_title_img {
  width: calc(100% - 138px);
  max-width: 430px;
}
.question_boxes {
  margin-top: 20px;
  padding: 0px 20px;
}
.question_box {
  margin-top: 10px;
  padding: 18px 16px;
  border-radius: 8px;
  border: 2px solid #f2f4f4;
  background-color: #fff;
}
.question {
  display: flex;
}
.answer {
  display: flex;
  margin-top: 6px;
}

/* お客様の声 */
.cv_area {
  margin-top: 40px;
}
.cvs {
  padding: 10px 20px;
}
.cv_title_img {
  width: calc(100% - 190px);
  max-width: 312px;
}
.cv_tags {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 10px 0px;
}
.cv_tag {
  background: #F2F4F4;
  border-radius: 35px;
  margin-right: 10px;
  padding: 2px 8px;
  font-weight: bold;
  color: #3fc515;
}

/* 必要な保険 */
.need_insurance_area {
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 20px;
}
.need_insurance_title_img {
  width: calc(100% - 75px);
  max-width: 530px;
}
.need_insurances {
  padding: 0px 20px;
}
.need_insurance_box {
  margin: 20px 0px 0px 0px;
}
.need_insurance_illust1_img {
  width: calc(100% - 46px);
  max-width: 383px;
}
.need_insurance_illust2_img {
  width: calc(100% - 65px);
  max-width: 358px;
}
.need_insurance_illust3_img {
  width: calc(100% - 153px);
  max-width: 241px;
}
.need_insurance_title {
  text-align: center;
  margin-bottom: 8px;
  color: #3fc515;
}
.need_insurance_description {
  margin-top: 45px;
  padding: 42px 20px 20px 20px;
  background-color: #fff;
  border-radius: 10px;
}

/** キャンペーン */
.campaign_banner {
  margin: 10px 10px 0px 10px;
}
.campaign_banner_illust {
  width: 100%;
}
.campaign_title_img {
  width: calc(100% - 92px);
  max-width: 504px;
}
.campaign_area {
  padding-top: 40px;
  padding-bottom: 40px;
}
.campaign_illust{
  margin: 0px 20px 0px 20px;
}
.campaign_illust_img {
  width: 100%;
  margin: 20px 0px;
}
.campaign_box {
  border: 2px solid #F2F4F4;
  border-radius: 8px;
  padding: 9px 8px;
  margin: 0px 20px;
}
.campaign_description_box {
  margin: 20px 16px;
}
.campaign_description {
  margin-top: 6px;
}

/** 申し込み画面 */
.time {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
}
.time_img {
  width: 240px;
}
.line_space {
  margin-top: 5px;
}

/** 完了画面 */
.complete_icon {
  height: 35px;
  width: 35px;
}
.icon_line {
  width: calc((100% - 50px - (35px * 3)) / 2);
  height: 17px;
}
.icon_complete_line {
  border-bottom: 1px solid #ddd;
}
.icon_active_line {
  border-bottom: 1px solid #3fc515;
}
.icon1 { margin-left: 25px; }
.icon3 { margin-right: 25px; }

/** 文字サイズ */
.fs_title {
  font-size: 20px;
}
.fs_btn {
  font-size: 18px;
}
.fs_sub_title {
  font-size: 16px;
}
.fs_item {
  font-size: 14px;
}
.fs_description {
  font-size: 12px;
}
.fs_error_msg {
  font-size: 10px;
}
.fs_error_extra {
  font-size: 18px;
}

.error_message_label {
  width: 18px;
  height: 18px;
  padding: 0px 3px 6px 3px;
  margin-right: -5px;
  text-align: center;
  left: 20px;
  font-weight: bold;
}
.error_message {
  margin-top: 5px;
}
.m_title {
  margin-top: 10px;
  margin-bottom: 5px;
}
.description {
  margin-bottom: 5px;
}
.mb_description {
  margin-bottom: 14px;
}

.required {
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 3px;
  font-size: 16px;
  color: white;
  background-color: #ff7200;
}

/** 入力欄 */
textarea.input_box {
  width: 100%;
  border: 1px solid #ddd;
  padding: 13px 13px;
  border-radius: 3px;
  height: 85px;
  resize: none;
}
input.input_box {
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px 13px;
  border-radius: 4px;
}
select.input_box {
  width: 100%;
  border: 1px solid #ddd;
  padding: 14px 13px;
  border-radius: 4px;
}
textarea:focus,
input:focus,
select:focus {
  border: 1px solid #58c736;
  outline: 0;
}
div.year {
  width: calc(40%);
}
div.month,
div.day {
  width: calc(30%);
  margin-left: 10px;
}

/* ボタン */
.btn {
  border: 0px;
  width: 100%;
  border-radius: 5px;
  margin-top: 10px;
  height: 60px;
  cursor: pointer;
}
.application_btn {
  color: #fff;
  background-color: #3fc515;
  width: 100%;
}
.btn_label {
  position: absolute;
  margin-top: -20px;
  margin-left: -10px;
  width: 56px;
  height: 56px;
}
.close_btn {
  border: 0px;
  width: 100%;
  border-radius: 5px;
  height: 80px;
  cursor: pointer;
}
.btn_supplement {
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

/* ラジオボタンの箱 */
ul.radio li {
  margin-top: 8px;
  border: 1px solid #ddd;
  padding:9px 13px;
  border-radius: 4px;
}
ul.radio li label {
  display: block;
}

/* ラジオボタン */
.radiobox {
  display: none;
  padding-right: 10px;
}
.radiobox + label{
  padding-left: 25px;
  position:relative;
}
.radiobox + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 2px solid #ccc;
  border-radius: 50%;
}
.radiobox:checked + label::before {
  border: 2px solid #58c736
}
.radiobox:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(0px + (15px + (2px * 2) - 11px) / 2);
  left: calc(0px + (15px + (2px * 2) - 11px) / 2);
  width: 11px;
  height: 11px;
  background: #58c736;
  border-radius: 50%;
}

/* チェックボックス */
input.checkbox[type=checkbox] {
    display: none;
}
.checkbox {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 5px 5px 30px;
    position: relative;
    width: auto;
    margin-bottom: 4px;
}
.checkbox::before {
    border: 2px solid #ccc;
    content: '';
    display: block;
    height: 15px;
    width: 15px;
    top: 55%;
    left: 5px;
    margin-top: -12px;
    position: absolute;
    border-radius: 3px;
}
.checkbox::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: '';
    display: block;
    height: 9px;
    width: 5px;
    top: 55%;
    left: 11px;
    margin-top: -9px;
    opacity: 0;
    position: absolute;
    transform: rotate(45deg);
}
.checkbox:checked + label:before {
  background-color: #58c736;
  border: 2px solid #58c736;
}
input.checkbox[type=checkbox]:checked + .checkbox::after {
    opacity: 1;
}