@import url("reset_for_girls_v3.0.css?0001");

:root {
  --clMain: #ff58A3;
  --clMain-half: #FFEEF6;
  --clMain-dis: rgba(255, 88, 163, .38);
  --clSub: #03c2a2;
  --clSub-half: #E5F9F6;
  --clSub-dis: rgba(3, 194, 162, .38);
  --clErr: #b00020;
  --clHe: #212121;
  --clHe2: rgba(0,0,0,.87);
  --clHeW: rgba(255,255,255,1);
  --clMe: #666;
  --clMe2: rgba(0,0,0,.6);
  --clMeW: rgba(255,255,255, .7);
  --clDis: #b2b2b2;
  --clDis2: rgba(0,0,0,.38);
  --clDisW: rgba(255,255,255,.5);
  --clDiv: #e0e0e0;
  --clDiv2: rgba(0,0,0,.1);

  --clMarker-main: #FFC2E8;
  --clMarker-sub: #7AEFD4;
  --clMarker-point: #FFF565;

  --sizeValue1: 10px;
  --sizeValue2: 12px;
  --sizeValue3: 14px;
  --sizeValue4: 16px;
  --sizeValue5: 18px;
  --sizeValue6: 20px;
  --sizeValue7: 22px;
  --sizeValue8: 24px;

  --multiple-half: 4px;
  --multiple-1: 8px;
  --multiple-2: 16px;
  --multiple-3: 24px;
  --multiple-4: 32px;
  --multiple-5: 40px;
  --multiple-6: 48px;
  --multiple-7: 56px;
  --multiple-8: 64px;
  --multiple-9: 72px;
  --multiple-10: 80px;
}

/*Layout
-----------------------------------------
/*width*/
.l-w_a { width: auto; }
.l-w_25 { width: 25% }
.l-w_30 { width: 30% }
.l-w_35 { width: 35% }
.l-w_40 { width: 40% }
.l-w_45 { width: 45% }
.l-w_50 { width: 50% }
.l-w_55 { width: 55% }
.l-w_60 { width: 60% }
.l-w_65 { width: 65% }
.l-w_70 { width: 70% }
.l-w_75 { width: 75% }
.l-w_80 { width: 80% }
.l-w_85 { width: 85% }
.l-w_90 { width: 90% }
.l-w_95 { width: 95% }
.l-w_100 { width: 100% }

/*margin*/
.l-mg_auto { margin: auto; }
.l-mg_half { margin: var(--multiple-half); }
.l-mg_1 { margin: var(--multiple-1); }
.l-mg_2 { margin: var(--multiple-2); }
.l-mg_3 { margin: var(--multiple-3); }
.l-mg_4 { margin: var(--multiple-4); }
.l-mg_5 { margin: var(--multiple-5); }
.l-mg_6 { margin: var(--multiple-6); }
.l-mg_7 { margin: var(--multiple-7); }
.l-mg_8 { margin: var(--multiple-8); }
.l-mg_9 { margin: var(--multiple-9); }
.l-mg_10 { margin: var(--multiple-10); }

.l-mg_t_half { margin-top: var(--multiple-half); }
.l-mg_t_1 { margin-top: var(--multiple-1); }
.l-mg_t_2 { margin-top: var(--multiple-2); }
.l-mg_t_3 { margin-top: var(--multiple-3); }
.l-mg_t_4 { margin-top: var(--multiple-4); }
.l-mg_t_5 { margin-top: var(--multiple-5); }
.l-mg_t_6 { margin-top: var(--multiple-6); }
.l-mg_t_7 { margin-top: var(--multiple-7); }
.l-mg_t_8 { margin-top: var(--multiple-8); }
.l-mg_t_9 { margin-top: var(--multiple-9); }
.l-mg_t_10 { margin-top: var(--multiple-10); }

.l-mg_r_half { margin-right: var(--multiple-half); }
.l-mg_r_1 { margin-right: var(--multiple-1); }
.l-mg_r_2 { margin-right: var(--multiple-2); }
.l-mg_r_3 { margin-right: var(--multiple-3); }
.l-mg_r_4 { margin-right: var(--multiple-4); }
.l-mg_r_5 { margin-right: var(--multiple-5); }
.l-mg_r_6 { margin-right: var(--multiple-6); }
.l-mg_r_7 { margin-right: var(--multiple-7); }
.l-mg_r_8 { margin-right: var(--multiple-8); }
.l-mg_r_9 { margin-right: var(--multiple-9); }
.l-mg_r_10 { margin-right: var(--multiple-10); }

.l-mg_b_half { margin-bottom: var(--multiple-half); }
.l-mg_b_1 { margin-bottom: var(--multiple-1); }
.l-mg_b_2 { margin-bottom: var(--multiple-2); }
.l-mg_b_3 { margin-bottom: var(--multiple-3); }
.l-mg_b_4 { margin-bottom: var(--multiple-4); }
.l-mg_b_5 { margin-bottom: var(--multiple-5); }
.l-mg_b_6 { margin-bottom: var(--multiple-6); }
.l-mg_b_7 { margin-bottom: var(--multiple-7); }
.l-mg_b_8 { margin-bottom: var(--multiple-8); }
.l-mg_b_9 { margin-bottom: var(--multiple-9); }
.l-mg_b_10 { margin-bottom: var(--multiple-10); }

.l-mg_l_half { margin-left: var(--multiple-half); }
.l-mg_l_1 { margin-left: var(--multiple-1); }
.l-mg_l_2 { margin-left: var(--multiple-2); }
.l-mg_l_3 { margin-left: var(--multiple-3); }
.l-mg_l_4 { margin-left: var(--multiple-4); }
.l-mg_l_5 { margin-left: var(--multiple-5); }
.l-mg_l_6 { margin-left: var(--multiple-6); }
.l-mg_l_7 { margin-left: var(--multiple-7); }
.l-mg_l_8 { margin-left: var(--multiple-8); }
.l-mg_l_9 { margin-left: var(--multiple-9); }
.l-mg_l_10 { margin-left: var(--multiple-10); }

.l-mg_tb_half { margin-top: var(--multiple-half); margin-bottom: var(--multiple-half); }
.l-mg_tb_1 { margin-top: var(--multiple-1); margin-bottom: var(--multiple-1); }
.l-mg_tb_2 { margin-top: var(--multiple-2); margin-bottom: var(--multiple-2); }
.l-mg_tb_3 { margin-top: var(--multiple-3); margin-bottom: var(--multiple-3); }
.l-mg_tb_4 { margin-top: var(--multiple-4); margin-bottom: var(--multiple-4); }
.l-mg_tb_5 { margin-top: var(--multiple-5); margin-bottom: var(--multiple-5); }
.l-mg_tb_6 { margin-top: var(--multiple-6); margin-bottom: var(--multiple-6); }
.l-mg_tb_7 { margin-top: var(--multiple-7); margin-bottom: var(--multiple-7); }
.l-mg_tb_8 { margin-top: var(--multiple-8); margin-bottom: var(--multiple-8); }
.l-mg_tb_9 { margin-top: var(--multiple-9); margin-bottom: var(--multiple-9); }
.l-mg_tb_10 { margin-top: var(--multiple-10); margin-bottom: var(--multiple-10); }

.l-mg_lr_half { margin-left: var(--multiple-half); margin-right: var(--multiple-half); }
.l-mg_lr_1 { margin-left: var(--multiple-1); margin-right: var(--multiple-1); }
.l-mg_lr_2 { margin-left: var(--multiple-2); margin-right: var(--multiple-2); }
.l-mg_lr_3 { margin-left: var(--multiple-3); margin-right: var(--multiple-3); }
.l-mg_lr_4 { margin-left: var(--multiple-4); margin-right: var(--multiple-4); }
.l-mg_lr_5 { margin-left: var(--multiple-5); margin-right: var(--multiple-5); }
.l-mg_lr_6 { margin-left: var(--multiple-6); margin-right: var(--multiple-6); }
.l-mg_lr_7 { margin-left: var(--multiple-7); margin-right: var(--multiple-7); }
.l-mg_lr_8 { margin-left: var(--multiple-8); margin-right: var(--multiple-8); }
.l-mg_lr_9 { margin-left: var(--multiple-9); margin-right: var(--multiple-9); }
.l-mg_lr_10 { margin-left: var(--multiple-10); margin-right: var(--multiple-10); }

/*padding*/
.l-pd_half { padding: var(--multiple-half); }
.l-pd_1 { padding: var(--multiple-1); }
.l-pd_2 { padding: var(--multiple-2); }
.l-pd_3 { padding: var(--multiple-3); }
.l-pd_4 { padding: var(--multiple-4); }
.l-pd_5 { padding: var(--multiple-5); }
.l-pd_6 { padding: var(--multiple-6); }
.l-pd_7 { padding: var(--multiple-7); }
.l-pd_8 { padding: var(--multiple-8); }
.l-pd_9 { padding: var(--multiple-9); }
.l-pd_10 { padding: var(--multiple-10); }

.l-pd_t_half { padding-top: var(--multiple-half); }
.l-pd_t_1 { padding-top: var(--multiple-1); }
.l-pd_t_2 { padding-top: var(--multiple-2); }
.l-pd_t_3 { padding-top: var(--multiple-3); }
.l-pd_t_4 { padding-top: var(--multiple-4); }
.l-pd_t_5 { padding-top: var(--multiple-5); }
.l-pd_t_6 { padding-top: var(--multiple-6); }
.l-pd_t_7 { padding-top: var(--multiple-7); }
.l-pd_t_8 { padding-top: var(--multiple-8); }
.l-pd_t_9 { padding-top: var(--multiple-9); }
.l-pd_t_10 { padding-top: var(--multiple-10); }

.l-pd_r_half { padding-right: var(--multiple-half); }
.l-pd_r_1 { padding-right: var(--multiple-1); }
.l-pd_r_2 { padding-right: var(--multiple-2); }
.l-pd_r_3 { padding-right: var(--multiple-3); }
.l-pd_r_4 { padding-right: var(--multiple-4); }
.l-pd_r_5 { padding-right: var(--multiple-5); }
.l-pd_r_6 { padding-right: var(--multiple-6); }
.l-pd_r_7 { padding-right: var(--multiple-7); }
.l-pd_r_8 { padding-right: var(--multiple-8); }
.l-pd_r_9 { padding-right: var(--multiple-9); }
.l-pd_r_10 { padding-right: var(--multiple-10); }

.l-pd_b_half { padding-bottom: var(--multiple-half); }
.l-pd_b_1 { padding-bottom: var(--multiple-1); }
.l-pd_b_2 { padding-bottom: var(--multiple-2); }
.l-pd_b_3 { padding-bottom: var(--multiple-3); }
.l-pd_b_4 { padding-bottom: var(--multiple-4); }
.l-pd_b_5 { padding-bottom: var(--multiple-5); }
.l-pd_b_6 { padding-bottom: var(--multiple-6); }
.l-pd_b_7 { padding-bottom: var(--multiple-7); }
.l-pd_b_8 { padding-bottom: var(--multiple-8); }
.l-pd_b_9 { padding-bottom: var(--multiple-9); }
.l-pd_b_10 { padding-bottom: var(--multiple-10); }

.l-pd_l_half { padding-left: var(--multiple-half); }
.l-pd_l_1 { padding-left: var(--multiple-1); }
.l-pd_l_2 { padding-left: var(--multiple-2); }
.l-pd_l_3 { padding-left: var(--multiple-3); }
.l-pd_l_4 { padding-left: var(--multiple-4); }
.l-pd_l_5 { padding-left: var(--multiple-5); }
.l-pd_l_6 { padding-left: var(--multiple-6); }
.l-pd_l_7 { padding-left: var(--multiple-7); }
.l-pd_l_8 { padding-left: var(--multiple-8); }
.l-pd_l_9 { padding-left: var(--multiple-9); }
.l-pd_l_10 { padding-left: var(--multiple-10); }

.l-pd_tb_half { padding-top: var(--multiple-half); padding-bottom: var(--multiple-half); }
.l-pd_tb_1 { padding-top: var(--multiple-1); padding-bottom: var(--multiple-1); }
.l-pd_tb_2 { padding-top: var(--multiple-2); padding-bottom: var(--multiple-2); }
.l-pd_tb_3 { padding-top: var(--multiple-3); padding-bottom: var(--multiple-3); }
.l-pd_tb_4 { padding-top: var(--multiple-4); padding-bottom: var(--multiple-4); }
.l-pd_tb_5 { padding-top: var(--multiple-5); padding-bottom: var(--multiple-5); }
.l-pd_tb_6 { padding-top: var(--multiple-6); padding-bottom: var(--multiple-6); }
.l-pd_tb_7 { padding-top: var(--multiple-7); padding-bottom: var(--multiple-7); }
.l-pd_tb_8 { padding-top: var(--multiple-8); padding-bottom: var(--multiple-8); }
.l-pd_tb_9 { padding-top: var(--multiple-9); padding-bottom: var(--multiple-9); }
.l-pd_tb_10 { padding-top: var(--multiple-10); padding-bottom: var(--multiple-10); }

.l-pd_lr_half { padding-left: var(--multiple-half); padding-right: var(--multiple-half); }
.l-pd_lr_1 { padding-left: var(--multiple-1); padding-right: var(--multiple-1); }
.l-pd_lr_2 { padding-left: var(--multiple-2); padding-right: var(--multiple-2); }
.l-pd_lr_3 { padding-left: var(--multiple-3); padding-right: var(--multiple-3); }
.l-pd_lr_4 { padding-left: var(--multiple-4); padding-right: var(--multiple-4); }
.l-pd_lr_5 { padding-left: var(--multiple-5); padding-right: var(--multiple-5); }
.l-pd_lr_6 { padding-left: var(--multiple-6); padding-right: var(--multiple-6); }
.l-pd_lr_7 { padding-left: var(--multiple-7); padding-right: var(--multiple-7); }
.l-pd_lr_8 { padding-left: var(--multiple-8); padding-right: var(--multiple-8); }
.l-pd_lr_9 { padding-left: var(--multiple-9); padding-right: var(--multiple-9); }
.l-pd_lr_10 { padding-left: var(--multiple-10); padding-right: var(--multiple-10); }

/*flex*/
.l-flex {
  display: flex;
}

.l-jc_fs {
  justify-content: flex-start;
}
.l-jc_center {
  justify-content: center;
}
.l-jc_sb {
  justify-content: space-between;
}
.l-jc_fe {
  justify-content: flex-end;
}

.l-ai_fs {
  align-items: flex-start;
}
.l-ai_center {
  align-items: center;
}
.l-ai_sb {
  align-items: space-between;
}
.l-ai_fe {
  align-items: flex-end;
}

/*vertical-align*/
.l-va_t { vertical-align: top; }
.l-va_m { vertical-align: middle; }
.l-va_b { vertical-align: bottom; }

/*position*/
.l-pos_rel {
  position: relative;
}
.l-pos_abs {
  position: absolute;
}
.l-pos_fix {
  position: fixed;
}

/*UI
-----------------------------------------
/*font-size*/
.ui-fs_1 { font-size: var(--sizeValue1); }
.ui-fs_2 { font-size: var(--sizeValue2); }
.ui-fs_3 { font-size: var(--sizeValue3); }
.ui-fs_4 { font-size: var(--sizeValue4); }
.ui-fs_5 { font-size: var(--sizeValue5); }
.ui-fs_6 { font-size: var(--sizeValue6); }
.ui-fs_7 { font-size: var(--sizeValue7); }
.ui-fs_8 { font-size: var(--sizeValue8); }

/*font-weight*/
.ui-fw_b { font-weight: bold; }

/*text-align*/
.ui-ta_l { text-align: left; }
.ui-ta_c { text-align: center; }
.ui-ta_r { text-align: right; }

/*font-color*/
.ui-fc_main { color: var(--clMain); }
.ui-fc_main_half { color: var(--clMain-half); }
.ui-fc_main_dis { color: var(--clMain-dis); }
.ui-fc_sub { color: var(--clSub); }
.ui-fc_sub_half { color: var(--clSub-half); }
.ui-fc_sub_dis { color: var(--clSub-dis); }
.ui-fc_err { color: var(--clErr); }
.ui-fc-def_o { color: var(--clHe2); }
.ui-fc-def_w { color: var(--clHeW); }
.ui-fc_me { color: var(--clMe); }
.ui-fc_me_o { color: var(--clMe2); }
.ui-fc_me_w { color: var(--clMeW); }
.ui-fc_dis { color: var(--clDis); }
.ui-fc_dis_o { color: var(--clDis2); }
.ui-fc_dis_w { color: var(--clDisW); }
.ui-fc-div { color: var(--clDiv); }

/*background-color*/
.ui-bg_main { background: var(--clMain); }
.ui-bg_main_half { background: var(--clMain-half); }
.ui-bg_main_dis { background: var(--clMain-dis); }
.ui-bg_sub { background: var(--clSub); }
.ui-bg_sub_half { background: var(--clSub-half); }
.ui-bg_sub_dis { background: var(--clSub-dis); }
.ui-bg_err { background: var(--clErr); }
.ui-bg_def_o { background: var(--clHe2); }
.ui-bg_def_w { background: var(--clHeW); }
.ui-bg_me { background: var(--clMe); }
.ui-bg_me_o { background: var(--clMe2); }
.ui-bg_me_w { background: var(--clMeW); }
.ui-bg_dis { background: var(--clDis); }
.ui-bg_dis_o { background: var(--clDis2); }
.ui-bg_dis_w { background: var(--clDisW); }
.ui-bg_div { background: var(--clDiv); }
.ui-bg_div_o { background: var(--clDiv2); }

/*border*/
.ui-bd {
  border: 1px solid var(--clHe);
}
.ui-bd_t {
  border-top: 1px solid var(--clHe);
}
.ui-bd_r {
  border-right: 1px solid var(--clHe);
}
.ui-bd_b {
  border-bottom: 1px solid var(--clHe);
}
.ui-bd_l {
  border-left: 1px solid var(--clHe);
}

/*marker*/
.ui-marker_main { background: linear-gradient(transparent 60%, var(--clMarker-main) 60%); }
.ui-marker_sub { background: linear-gradient(transparent 60%, var(--clMarker-sub) 60%); }
.ui-marker_point { background: linear-gradient(transparent 60%, var(--clMarker-point) 60%); }

/*button*/
[class*="ui-btn_"] {
  padding: var(--multiple-2) 0;
  font-size: var(--sizeValue4);
  font-weight: bold;
  text-align: center;
  width: 100%;
  border-radius: 100px;
}

[class*="ui-btn_h"] {
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.ui-btn_h_main {
  background: var(--clMain);
}
.ui-btn_h_sub {
  background: var(--clSub);
}

[class*="ui-btn_m"] {
  border: 1px solid #000;
}
.ui-btn_m_main,
.ui-btn_l_main {
  color: var(--clMain);
}
.ui-btn_m_sub,
.ui-btn_l_sub {
  color: var(--clSub);
}

[class*="ui-btn_dis"] {
  color: #fff;
}

.ui-btn_dis_main {
  background: var(--clMain-dis);
}
.ui-btn_dis_sub {
  background: var(--clSub-dis);
}

/*popuup*/
.ui-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ui-popup_inner {
  width: 90%;
  padding: var(--multiple-2) var(--multiple-2) var(--multiple-3);
  background: #fff;
  box-shadow: 0 6px 19px rgb(0 0 0 / 30%);
}

.ui-popup_img {
  margin: 0 0 var(--multiple-2);
}

.ui-popup_img img {
  width: 100%;
}

.ui-popup_text {
  margin: 0 0 var(--multiple-4);
}

.ui-popup_btn {
  display: flex;
  justify-content: flex-end;
}

.ui-popup_btn_item:not(:last-child) {
  margin: 0 var(--multiple-2) 0 0;
}

.ui-popup_btn_item a {
  padding: var(--multiple-1) var(--multiple-2) var(--multiple-1) var(--multiple-2);
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
}

.ui-popup_close {
  border: 1px solid rgb(0, 0, 0, .05);
  color: var(--clMain);
}

.ui-popup_link {
  background: var(--clMain);
  color: #fff;
}

.ui-bg_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.ui-footer_link {
  background-image: url(/User/ViComm/man/Image/A001/menu_yaji.png);
  background-position: 0% 50%;
  background-size: auto 10px;
  background-repeat: no-repeat;
  margin-bottom: var(--multiple-1);
  padding-left: var(--multiple-2);
}