* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "游ゴシック", sans-serif;
  overflow-wrap: break-word;
}


.mb ,
.mb-ib {
  display: none  !important;
}


body {
  margin: 0 auto;
  width: 1000px;
  text-align: center;
  color: #000;
  font-size: 1em;
}


/*** common ***/


h1 {
  border-bottom: solid 2px #040;
  margin: 100px auto 2em;
  width: 1000px;
  padding-bottom: 0.3em;
  color: #040;
  font-size: 1.8em;
}


h2 {
  margin: 2em auto;
  font-size: 1.6em;
}


h3 {
  margin: 2em auto;
  width: 1000px;
  font-size: 1.2em;
}


ul.nav {
  margin: 0;
  padding: 0;
}


ul.nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}


ul.nav li a {
  display: block;
}


a {
  color: #00f;
}


a:hover img {
  opacity: 0.6;
}


img {
  margin: 0;
  border: 0;
  padding: 0;
  vertical-align: middle;
}


strong {
  font-size: 140%;
}


em {
  color: #f00;
  font-style: normal;
}


hr {
  margin: 2em auto;
  border: 0;
  border-top: dotted 1px #668;
  width: 800px;
}


img.icon {
  width: 20px;
  height: 20px;
}


span.label {
  position: relative;
  top: -30vh;
}


p.index_news {
  margin: 2em auto;
  color: #f00;
  font-weight: bold;
  font-size: 1em;
  text-align: left;
}


/*** header ***/


header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: solid 1px #006;
  background-color: rgba( 0 , 0 , 64 , 0.6 );
  text-align: center;
  font-weight: bold;
}


header img.logo {
  width: auto;
  height: 60px;
}


/*** menu ***/


header div {
  margin: 0 auto;
  width: 1000px;
  text-align: left;
}


a.menu {
  position: fixed;
  padding: 3px 20px;
}


a.menu img {
  width: auto;
  height: 54px;
}


a#menu_background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba( 0 , 0 , 0 , 0.8 );
}


ul#menu {
  display: block;
  position: fixed;
  top: -100vh;
  margin: 0 auto;
  width: 800px;
  max-height: 100vh;
  padding: 30px 0 0;
  background-color: rgba( 255 , 255 , 255 , 0.9 );
  text-align: left;
  overflow: auto;
  transition: 0.4s;
  opacity: 0;
}


ul#menu li {
  display: inline-block;
  width: 400px;
}


ul#menu a {
  display: block;
  padding: 1em 20px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #000;
  text-decoration: none;
}
ul#menu a:hover {
  background-color: rgba( 127 , 127 , 255 , 0.6 );
}


ul#menu li.close {
  width: 800px;
}


ul#menu li.close a {
  padding: 0.4em 0;
  font-size: 0.8em;
  background-color: rgba( 255 , 0 , 0 , 0.3 );
}
ul#menu li.close a:hover {
  background-color: rgba( 255 , 0 , 0 , 0.6 );
}


/*** table-form ***/


table.form {
  margin: 0.5em auto 2em;
  border-collapse: collapse;
  width: 1000px;
}


table.form th {
  border: solid 1px #444;
  padding: 20px 0;
}


table.form td {
  border: solid 1px #444;
  width: 700px;
  padding: 20px;
  text-align: left;
}


span.required {
  color: #f00;
  font-weight: bold;
}


/*** input ***/


input ,
textarea ,
select {
  font-size: 1.1em;
}


input.text ,
input.select ,
select.select ,
textarea.textarea {
  -webkit-appearance: none;
  border: solid 1px #444;
  border-radius: 0;
  width: 100%;
  padding: 0.5em;
}
input.text:hover ,
input.select ,
select.select:hover ,
textarea.textarea:hover {
  border-color: #f00;
  color: #800;
}


input.password {
  font-family: "游明朝","serif";
}


input.select ,
select.select {
  border-color: #080;
  color: #080;
}


textarea.textarea {
  resize: vertical;
}


label {
  display: block;
  margin: 0 auto;
  text-align: left;
  font-size: 1.1em;
}


input.radio {
  margin: 0 0.5em;
}


input.radio + span {
  display: inline-block;
  border-radius: 10em;
  min-width: 50%;
  padding: 0.5em 1em;
}
input.radio:checked + span {
  background-color: #dfd;
}


input.button ,
a.button {
  -webkit-appearance: none;
  display: inline-block;
  margin: 2em auto 3em;
  border: solid 2px #666;
  border-radius: 0.2em;
  width: 600px;
  padding: 1em 0;
  background-color: #fff;
  color: #666;
  font-weight: bold;
  text-decoration: none;
  transition: 0.4s;
}
input.button:hover ,
a.button:hover {
  background-color: #666;
  color: #fff;
  cursor: pointer;
}


input.half ,
select.half {
  width: 45%;
}


input.disabled ,
input.disabled:hover {
  visibility: hidden;
  cursor: auto;
}


input.submit {
  border-color: #800;
  color: #800;
}
input.submit:hover {
  background-color: #800;
}


div.button_half a.button ,
div.button_half input.button {
  width: 350px;
}


input.shop_user {
  margin: 2px;
  width: auto;
  padding: 0.3em 1em;
}


input.postcode {
  margin-bottom: 2px;
  width: 200px;
}


input.ajaxzip {
  margin: 2px;
  width: 260px;
  padding: 0.3em 0;
}


input.price {
  width: 120px;
}


div.g-recaptcha div {
  margin: 3em auto;
}


div.g-recaptcha iframe {
  display: block;
}


/*** error ***/


ul.error {
  display: inline-block;
  margin: 2em auto;
  max-width: 98vw;
  color: #f00;
  text-align: left;
}


ul.error li {
  margin: 1em 0;
}


/*** common ***/


span.minus {
  color: #f00;
}


table td.title {
  font-weight: bold;
}


table td.sum {
  font-weight: bold;
}


span.symbol {
  color: #f08;
}


span.anchor {
  position: relative;
  top: -100px;
}


/*** ul-year ***/


ul.year {
  margin: 1em auto 3em;
}


ul.year li {
  margin: 0 0.3em;
}


ul.year li.this {
  font-weight: bold;
}


/*** table-rows ***/


table.rows {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.rows tr {
  border-top: solid 1px #444;
  border-bottom: solid 1px #444;
}


table.rows td {
  padding: 5px 0;
}


table.rows td.icon {
  width: 50px;
}


table.rows td.icon a {
  display: block;
}


/*** table-year ***/


table.year {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.year th ,
table.year td {
  padding: 5px 0;
  border: solid 1px #444;
  text-align: center;
}


table.year th.year {
  font-weight: bold;
}


table.year th.month {
  font-weight: bold;
  width: 70px;
}


table.year th.period {
  font-weight: bold;
  width: 210px;
}


/*** table-company ***/


table.company {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.company th ,
table.company td {
  padding: 5px 0;
  border: solid 1px #444;
  background-position: 10px center;
  background-repeat: no-repeat;
}


table.company td.company_code {
  width: 80px;
}


table.company td.shop_name {
  width: 200px;
}


table.company td.price {
  width: 120px;
}


table.company td.check {
  width: 60px;
  text-align: center;
}


table.company tr.status0 {
  background-color: #ddd;
}


/*** table-royalty ***/


table.royalty {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.royalty th ,
table.royalty td {
  padding: 5px 0;
  border: solid 1px #444;
  background-position: 10px center;
  background-repeat: no-repeat;
}


table.royalty tr.total {
  font-weight: bold;
}


table.royalty td.check {
  width: 50px;
}


table.royalty td.price {
  width: 110px;
  padding-right: 10px;
  text-align: right;
}


table.royalty td.total_price {
  width: 120px;
  padding-right: 10px;
  text-align: right;
  font-weight: bold;
}


table.royalty td.amount {
  width: 100px;
}


table.royalty td.date {
  width: 150px;
}


table.royalty tr.unpaid {
  background-color: #ddd;
}


table.royalty tr.receive {
  background-color: #efe;
}


table.royalty tr.sum {
  background-color: #fee;
}


/*** table-royalty_input ***/


table.royalty_input {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.royalty_input th ,
table.royalty_input td {
  padding: 5px 0;
  border: solid 1px #444;
}


table.royalty_input td.price {
  width: 120px;
}


table.royalty_input input.price {
  width: 120px;
  text-align: center;
}


table.royalty_input td.amount {
  width: 60px;
}


table.royalty_input input.amount {
  width: 60px;
  text-align: center;
}


table.royalty_input td.date {
  width: 120px;
}


table.royalty_input input.date {
  width: 120px;
  font-size: .8em;
  text-align: center;
}


table.royalty_input input.readonly {
  font-weight: bold;
}


table.royalty_input tr.unpaid {
  background-color: #ddd;
}


/*** table-contract ***/


table.contract {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.contract_disabled {
  background-color: #aaa;
}


table.contract th ,
table.contract td {
  padding: 5px 0;
  border: solid 1px #444;
  background-position: 10px center;
  background-repeat: no-repeat;
}


table.contract th.title ,
table.contract td.title {
  width: 240px;
}


table.contract th.planner_name ,
table.contract td.planner_name ,
table.contract th.contract_price ,
table.contract th.deposit_sum ,
table.contract th.withdrawal_sum ,
table.contract th.profit {
  width: 160px;
}


table.contract td.contract_price ,
table.contract td.deposit_sum ,
table.contract td.withdrawal_sum ,
table.contract td.profit {
  width: 160px;
  padding-right: 20px;
  text-align: right;
}


table.contract th.profit_percent {
  width: 120px;
}


table.contract td.profit_percent {
  width: 120px;
  padding-right: 20px;
  text-align: right;
}


table.contract th.contract_price ,
table.contract td.contract_price {
  background-image: url('images/contract_price.gif');
}


table.contract th.deposit_sum ,
table.contract td.deposit_sum {
  background-image: url('images/deposit.gif');
}


table.contract th.withdrawal_sum ,
table.contract td.withdrawal_sum {
  background-image: url('images/withdrawal.gif');
}


table.contract th.profit ,
table.contract td.profit {
  background-image: url('images/profit.gif');
  font-weight: bold;
}


table.contract th.profit_percent ,
table.contract td.profit_percent {
  background-image: url('images/percent.gif');
}


tr.disabled ,
td.disabled {
  background-color: #aaa;
}


/*** table-salary ***/


table.salary {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.salary th ,
table.salary td {
  padding: 5px 0;
  border: solid 1px #444;
}


table.salary th.contract_price ,
table.salary th.basic_salary ,
table.salary th.preliminary_salary {
  width: 250px;
}


table.salary td.contract_price ,
table.salary td.basic_salary ,
table.salary td.preliminary_salary {
  width: 250px;
  padding-right: 20px;
  text-align: right;
}


/*** table-salary ***/


table.bonus {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.bonus th ,
table.bonus td {
  width: calc( 1000px / 3 );
  padding: 5px 0;
  border: solid 1px #444;
  font-weight: bold;
}


/*** table-assessment ***/


table.assessment {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.assessment td {
  padding: 5px 0;
  border: solid 1px #444;
  background-position: 10px center;
  background-repeat: no-repeat;
}


table.assessment td.title {
  width: 240px;
}


table.assesment td.reward {
  width: 580px;
}


table.assessment td.reward {
  width: 160px;
  padding-right: 20px;
  text-align: right;
}


/*** table-contract_period ***/


table.contract_period {
  border-collapse: collapse;
  margin: 0.5em auto 2em;
  width: 1000px;
}


table.contract_period th ,
table.contract_period td {
  padding: 5px 0;
  border: solid 1px #444;
  background-position: 10px center;
  background-repeat: no-repeat;
}


table.contract_period td.contract_date {
  width: 100px;
}

table.contract_period td.amount {
  width: 100px;
  padding-right: 5px;
  text-align: right;
}


table.contract_period td.percent {
  width: 40px;
}


/*** approval ***/

h3.disabled {
  text-decoration: line-through;
}


/*** kintone_statistics ***/


table.kintone_statistics {
  border-collapse: collapse;
  width: 100%;
}


table.kintone_statistics th ,
table.kintone_statistics td {
  padding: 2px;
  border: solid 1px #444;
  text-align: center;
}


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

  .pc {
    display: none  !important;
  }
  .mb {
    display: block  !important;
  }
  .mb-ib {
    display: inline-block  !important;
  }


  body {
    width: 100vw;
    font-size: 1em;
    background-color: #eee;
  }


  /*** common ***/


  h1 {
    margin: 40px 0 1em;
    border: 0;
    width: 100vw;
    padding: 0.2em 0;
    background-color: #aaa;
    font-size: 1.2em;
  }


  a {
    color: #000;
    text-decoration: none;
  }


  img.img100vw {
    width: 100vw;
  }


  /*** frame ***/


  header {
    width: 100vw;
    height: 40px;
  }


  header img.logo {
    margin: 4px 0;
    height: 32px;
  }


  /*** menu ***/


  header div {
    width: 100vw;
  }


  a.menu {
    padding: 4px 5vw;
  }


  a.menu img {
    height: 32px;
  }


  ul#menu {
    width: 80vw;
    padding-top: 0;
  }


  ul#menu li {
    width: 80vw !important; 
  }


  ul#menu li a ,
  ul#menu li.close a {
    padding: 10px 0 10px 3vw;
    text-align: left;
    font-size: 1em;
    font-weight: normal;
  }
  ul#menu li a:hover {
    background-color: transparent;
  }
  ul#menu li.close a:hover {
    background-color: rgba( 255 , 0 , 0 , 0.3 );
  }


  /*** table-form ***/


  table.form {
    display: inline-block;
    margin: 0;
    width: 100vw;
  }


  table.form th ,
  table.form td {
    display: inline-block;
    border: 0;
    width: 100vw;
  }


  table.form th {
    padding: 0.2em 0;
    background-color: #484;
    color: #eee;
  }


  table.form td {
    padding: 0.5em 2vw 1em;
  }


  /*** input ***/


  input.half ,
  select.half {
    width: 100%;
  }


  input.radio {
    margin: 0;
    width: 10vw;
  }

  input.radio + span {
    width: 86vw;
  }
  input.radio:checked + span {
    background-color: #add;
  }


  input.button {
    border: 0;
    border-radius: 0;
    width: 90vw;
    background-color: #777;
    color: #fff;
    font-size: 0.9em;
    transition: 0s;
  }


  input.submit {
    background-color: #a00;
  }


  div.button_half input {
    width: 45vw;
  }



  input.postcode {
    width: 40vw;
  }


  input.ajaxzip ,
  input.price {
    width: 50vw;
  }


  /*** table-rows ***/


  table.rows ,
  table.rows tr {
    width: 100vw;
    font-size: 1em;
    letter-spacing: -0.4em;
  }

  table.rows tr {
  }

  table.rows td {
    display: inline-block;
    letter-spacing: normal;
  }


  table.rows td.icon {
    padding: 0;
    width: 10vw;
  }


  p.index_news {
    margin: 1em;
  }


  /*** customer ***/


  form#estimate_input ,
  form#file_input {
    width: 90vw;
    height: 80vh;
    padding: 0 5vw;
  }


  form#estimate_input input.radio + span {
    width: 50vw;
  }


  div.customer_search {
    text-align: center;
  }


  div.customer_search input.button {
    width: 40vw;
    padding: 1em 0;
  }


  div.customer_result ,
  div.craftsman_result {
    width: 100vw;
  }


  div.customer_insert ,
  div.craftsman_area_name {
    width: 100vw;
    margin: 0;
  }


  ul.customer ,
  ul.craftsman {
    width: 100vw;
    padding: 0;
    font-size: 1em;
  }


  ul.customer li ,
  ul.craftsman li {
    padding: 0;
  }


  ul.customer li.customer_name {
    width: 70vw;
  }


  ul.craftsman li.craftsman_company {
    width: 85vw;
    background-color: transparent;
  }


  ul.customer li.customer_name a ,
  ul.craftsman li.craftsman_company a {
    display: block;
    padding: 1em 0 1em 2vw;
    color: #000;
    font-weight: bold;
    text-align: left;
  }


  ul.customer li.icon ,
  ul.craftsman li.icon {
    width: 15vw;
  }


  ul.customer li.icon a ,
  ul.craftsman li.icon a {
    display: block;
    padding: 1em 0 1em 2vw;
  }


  ul.customer li.customer_tel {
    width: 40vw;
    background-color: #d8d8d8;
    font-size: 0.9em
  }


  ul.customer li.customer_tel div ,
  ul.customer li.customer_tel a {
    display: block;
    padding: 1em 0;
    color: #000;
  }


  ul.customer li.estimate_name ,
  ul.customer li.planner_name {
    width: 30vw;
    padding: 0;
    font-size: 0.9em
  }


  ul.customer li.planner_name div ,
  ul.customer li.planner_name a {
    display: block;
    padding: 1em 0;
  }


  ul.customer li.customer_address ,
  ul.craftsman li.craftsman_address {
    width: 100vw;
    font-size: 0.8em
  }


  ul.customer li.customer_address div ,
  ul.customer li.customer_address a ,
  ul.craftsman li.craftsman_address div ,
  ul.craftsman li.craftsman_address a {
    display: block;
    padding: 1em 0 1em 2vw;
    color: #000;
    text-align: left;
  }


  #droparea {
    width: 100vw;
    padding: 1em 0;
    font-size: 1em;
  }



  ul.filegroup {
    margin: 2em auto;
    width: 100vw;
    font-size: 0.9em;
    text-align: left;
  }


  ul.filegroup li.filegroup_insert {
    width: 100vw;
    padding: .2em 0;
    font-size: 1.5em;
    font-weight: bold;
  }


  ul.filegroup li.filegroup_name {
    width: 90vw;
    padding: .2em 0;
    font-size: 1.5em;
    font-weight: bold;
  }


  ul.filegroup li.filegroup_icon {
    width: 10vw;
  }


  ul.filegroup li.filegroup_icon img.icon {
    width: 7vw;
    height: auto;
  }


  ul.filegroup li.file {
    width: 100vw;
  }


  ul.file {
    border: 0;
    border-bottom: solid 2px #fff;
    width: 100vw;
    height: 25vw;
    line-height: 25vw;
    overflow: hidden;
  }


  ul.file li.file_thumbnail {
    width: 25vw;
    height: 25vw;
  }


  ul.file li.file_thumbnail a img.file_thumbnail {
    max-width: 25vw;
    height: 25vw;
  }


  ul.file li.file_name {
    width: 50vw;
    height: 25vw;
    font-size: 1em;
  }


  ul.file li.file_icon {
    width: 10vw;
  }


  ul.file li.file_icon img.icon {
    width: 7vw;
    height: auto;
  }


  /*** stop ***/


  ul.stop li.shop_name {
    width: 30vw;
    font-size: 1em;
  }


  ul.stop li.stop_expire {
    width: 70vw;
    font-size: 1em;
  }


  div.condition {
     width: 95vw;
  }


  /*** download ***/


  ul.download {
    margin-bottom: 0;
    border-top: dotted 1px #060;
    width: 100vw;
  }


  ul.download li {
    width: 100vw;
    padding: 0;
  }


  ul.download li a {
    border: none;
    border-bottom: dotted 1px #060;
    border-radius: 0;
  }


  /*** shop_list ***/


  ul.shop_list li.prefecture_name ,
  ul.shop_list li.area_name ,
  ul.shop_list li.shop_name {
    width: 100vw;
  }


  ul.shop_list li.shop_post {
    width: 20vw;
  }


  ul.shop_list li.shop_address {
    width: 80vw;
  }


  ul.shop_list li.shop_tel ,
  ul.shop_list li.shop_fax {
    width: 50vw;
  }


  ul.shop_list li.shop_googlereview ,
  ul.shop_list li.googlereview_pdf {
    width: 100vw;
  }


  ul.shop_list li.company_name {
    display: none;
  }


  ul.shop_list li.user_name {
    border-top: solid 1px #000;
    width: 100vw;
  }


  ul.shop_list li.user_email {
    width: 70vw;
  }


  ul.shop_list li.user_mobile {
    width: 30vw;
  }


  /* googlereview */


  img.googlereview_qrcode {
    width: 30vw;
  }

}



@media print
{
  .no_print {
    display: none;
  }


  header {
    display: none;
  }


  .page_break {
    page-break-after: always;
  }

}