/*** __action/common **/
html,body{width:100%;height:100%;}
html,body{margin:0;padding:0;}
*{box-sizing:border-box;}
body{display:flex;flex-direction:column;justify-content:space-between;}
a:link,a:active{text-decoration:none;color:inherit;}
a:hover{font-weight:bold;}
a,.selectable,.clickable,.selectable *,.clickable *{cursor:pointer;}
._mode_sketch{overflow: hidden;border: dotted 1px red;position:relative;}
._mode_sketch_description{position:absolute;top:0;left:0;font-size:2rem;color:#ccc;font-weight:bold;}
.inner{height:100%;width:100%;}
.esp-block-bar{display:flex;justify-content:space-between;align-items:center;margin:0;}
.esp-block-right-align {text-align:right;}
.esp-block-thin{height:2rem;}
.esp-block-thin h1{font-size:1rem;}
.esp-block-right-align {text-align:right;}
.esp-block-full-wide {width:100%;}
.esp-block-modest h2,.esp-block-modest h3,.esp-block-modest h4,.esp-block-modest h5,.esp-block-modest h6 {margin-top:0;margin-bottom:0;}
.esp-block-center{display:flex;justify-content:center;align-items:center;flex-direction:column;}
.esp-block-center-horizontal{display:flex;align-items:center;flex-direction:column;}
.preparing-target{position:relative;}
.preparing-cover{background-color:black;opacity:0.4;position:absolute;left:0;top:0;right:0;bottom:0;font-size:8rem;text-align:center;color:white;}
.preparing-cover span{position:absolute;top:50%;left:50%;transform: translateY(-50%) translateX(-50%);}

/***end of __action/common ***/

/*** __action/block **/
.esp-block-fixed{}
.notify{}
#error_box{}
#info_box{position:fixed;top:0;left:0;width:100%;height:1.5rem;background-color:yellow;opacity:0.3;color:#333;z-index:10000;}
#confirm_box{}
/***end of __action/block ***/

/*** __action/block/loading **/
.overlay {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10000;
  background-color: white;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center;
  display:flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
/***end of __action/block/loading ***/

/*** __action/block/lifestage **/
.esp-lifestage {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:-1;
  background-image: url(/_esp/img/underconst.png);
  opacity: 0.02;
}
/***end of __action/block/lifestage ***/

/*** __action/block/form **/
.esp-form {width:100%;font-size:1rem;overflow: auto;}
.esp-form .frame{display:table-cell;}
.esp-form div.field{display:table-row;height: auto;}
.esp-form div.cell{display:table-cell; padding:0.5rem 0.8rem; font-size:1rem;}
.esp-form div.label{text-align:left;width: 20%;white-space:nowrap; vertical-align: top;}
.esp-form div.label label{color:black;font-size:1rem;width:100%;}
.esp-form div.notes{width: 100%;font-size:0.8rem;}
.esp-form div.field.dirty .input{background-color:#f3e8aa;}
@media screen and (max-width:640px) {
  .esp-form .frame {
      display: flex;
      flex-direction: column;
      width: 100%;
  }
  .esp-form div.field {
      display: flex;
      flex-direction: column;
  }
  .esp-form div.field .label {
    width:100%;
  }
}
.esp-form div.check_group{display:flex;flex-wrap: wrap;}
.esp-form div.check{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    width: fit-content;
    margin-right: 0.8rem;
}
.esp-form div.check>input{
    margin-right: 0.3rem;
}
.esp-form div.check>label{
    height: auto;
    white-space:nowrap;
}
.esp-form div.hidable-notes .notes{
  display:none;
}
.esp-form div.hidable-notes:hover .notes{
  display:block;
}

/***end of __action/block/form ***/

/*** __action/block/form/horizontal **/
.esp-form-horizontal .frame{display: flex;flex-direction: row;}
.esp-form-horizontal .frame .field{display: flex;white-space:nowrap;}
.esp-form-horizontal .frame .cell.label{display:inline-block;padding:0;margin:0 0 0 5px;width:auto;}
.esp-form-horizontal .frame .cell.label:after{content:':';}
.esp-form-horizontal .frame .cell.label.blank{visibility:hidden;}
.esp-form-horizontal .frame .cell.data{padding:0;margin:0 3px 0 3px;width: 100%;display: inline;}

/***end of __action/block/form/horizontal ***/

/*** __action/block/list/flex **/
.esp-list-flex>.inner{
  width:100%;
}
@media screen and (min-width:414px) {
  .esp-list-flex .body{
    display:table;
  }
  .esp-list-flex .body dl{
    display:table-row;
  }
  .esp-list-flex .body dt{
    display:none;
  }
  .esp-list-flex .body dd{
    display:table-cell;
    border:1px solid gray;
    margin-inline-start: 0px;
    padding: 5px;
  }
}
@media screen and (max-width:414px) {
  .esp-list-flex .body dl{
    display:flex;
    flex-direction:column;
    border:2px solid gray;
    margin: 5px;
  }
  .esp-list-flex .body dt{
    display:none;
  }
  .esp-list-flex .body dd{
    border:1px solid gray;
    margin-inline-start: 0px;
    padding: 5px;
  }
}

/***end of __action/block/list/flex ***/

/*** @@system/page **/
html{color:;}
html,body{width:100%;height:100%;}
*{margin:0;padding:0;box-sizing:border-box;}
a:link,a:active{text-decoration:none;color:inherit;}
a:hover{font-weight:bold;}
a,.selectable,.clickable{cursor:pointer;}
._mode_sketch{overflow: hidden;border: dotted 1px red;position:relative;}
._mode_sketch_description{position:absolute;top:0;left:0;font-size:2rem;color:#ccc;font-weight:bold;}

#header{position:fixed;top:0;left:0;background-color:white;display:flex;flex-direction:row;justify-content: space-between;z-index: 10;}
#main{height:100%;width:100%; padding: 40px 0 24px 0;overflow: hidden;}
#main>.inner{height:100%;width:100%;/*display:flex;flex-direction:column;*/overflow: hidden;}
#footer{position:fixed;bottom:0;left:0;background-color:white;z-index: 10}

/*device= / pc*/
/*for pc*/
form input,form select,form button,form label{
  height: 1.8rem;
}
button{padding: 4px 20px; border-radius: 15px;}
/*for narrow width*/
@media screen and (max-width:414px) {
  form input,form select,form button,form label{
    font-size:16pt;
    height:2.2rem;
  }
  #footer {
      font-size: 0.6rem;
  }
}

button{padding: 0 20px; border-radius: 15px;}

/***end of @@system/page ***/

/*** body **/
body {
  font-family:"MS Pゴシック",sans-serif;
}
#header .title{
    font-size: 1.4rem;
    padding: 2px 0 0 10px;
}
/***end of body ***/

/*** main **/
body>.esp-loading div{
    text-align: center;
    line-height: 13vh;
    font-size: 7vw;
    font-weight: bold;
    color: darkviolet;
    text-shadow: 3px -2px pink;
}
body>.esp-loading div .sub{
    font-size: 6vw;
    line-height: 9vh;
}
body>.inner{overflow: hidden;}
#main>.inner{position:relative;overflow: hidden;}
#selector{width: 100%; height: 100%; overflow: hidden;}
/*#selector>.inner{height:100%;width:100%;display:flex;flex-direction:column;overflow: auto;}*/
#selector>.inner{width:100%;overflow: hidden;    display: flex;    flex-direction: column;}
#filter{position:relative; padding:6px;overflow: hidden;}
#filter .frame{display:flex;}
#filter .field{display:block;}
#filter .data{whit-space:norawp; padding:1px 4px;cursor:pointer;}
#filter .data:hover{background-color:cyan;}
#list{padding:10px;    display: flex;    flex-direction: column;height: 100%;    overflow: hidden;}
#list>.title{font-size: 1.2rem;height: auto;}
#list>.inner{overflow-y: auto;}
#list .body{display: flex;flex-wrap: wrap;}
#list .body .group-border {
   width: 100%;
    border-bottom: 2px gray solid;
/*   width: 80px;
    background-color: lightskyblue;
    padding: 5px;
    margin: 5px;*/
}
#list dl{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    width: auto;
    flex-wrap: wrap;
    margin:10px;
    font-size:0.8rem;
    align-items: center;
    border: none;
}
#list dt{display:none;}
#list dd{white-space:nowrap;border: none;}
#list .urlImage img{width:50px;}
#list .urlImage{position:relative; }
#list .urlImage .contact-list{display:none; position:absolute; top:200%; left:0; background-color:yellow; padding: 7px 14px; z-index: 10;}
#list .urlImage .contact-list ul{list-style-type: none;}

#area{position:absolute; height: calc(100vh - 64px);width:100vw; display: flex; flex-direction: column;}
#area{left:0;top:0;background-color:aliceblue;}
#area .frame{display: flex;    flex-direction: column;}
#area .frame .field{display: flex;    flex-direction: column;height:auto;}
#area .frame .field>div{display: block;}
#area .frame .field select{border: none;}
#area .frame .field input{border: none;}
#area .frame .field.pref,
#area .frame .field.area{border-top: 3px double gray;margin-top: 0.8rem;}

/***end of main ***/

/*** claim **/
#ordering{position:absolute; display:none; height: 70vh;width:80vw;margin:auto;overflow: hidden;
    background-color: white;    top: 10vh;
    left: 10vw;padding:20px;display:none;}
#ordering>.title{ font-size: 1rem;    margin: 0px;}
#ordering>.inner{overflow: hidden auto;height:calc(70vh - 5rem);padding: 15px 0;}
#ordering ul{display:flex;    border-bottom: 1px gray solid;
    margin-bottom: 9px;
    flex-wrap: wrap;font-size:0.8rem;    list-style: none;
    margin-block-start: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;}
#ordering li.area{width:90px;font-size:0.7rem;white-space:nowrap;}
#ordering li.name{width:120px;white-space:nowrap;}
#ordering li.contact{width:250px;white-space:nowrap;overflow:auto hidden;}
#ordering li.contact.old{background-color:yellow;}
#ordering li.contact.older{background-color:red;}

#claim{
    height:0;
    width:100%;
    background-color:paleturquoise;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#claim>.inner{    height:auto;position:relative;overflow-y: auto;    overflow-x: hidden;}
#claim>.title{    font-size: 1.2rem;}
#claim .frame{width:100%;display: flex;    flex-direction: column;}
#claim .frame .field{display: flex;    flex-direction: column;height:auto;}
#claim .frame .field>div{display: block;}
#claim textarea{
  width:100%;
}
#claim .explain,#claim .explain2{background-color: honeydew;border:inset 2px yellow;}

/***end of claim ***/