body {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

header {
  font-size: 20px;
}

table {
  width: 90%;
}

#btn {
  width: 80%;
}

.download {
  width: initial;
  width: 140px;
}

.r-flow {
  width: initial;
  width: 60%;
}

.icon-size {
  width: 15%;
}

.logs {
  width: initial;
  width: 80%;
}

.logsbox {
  height: 18px;
}

.maxcontent {
  width: 100%;
}

.maxbox {
  width: 90%;
}

.r-trouble {
  width: 90%;
}

@media screen and (min-width: 960px) {
  body {
    font-size: 20px;
  }

  header {
    font-size: 40px;
  }

  table {
    width: 920px;
  }

  img {
    max-width: 960px;
  }

  #btn {
    width: 760px;
  }

  .download {
    width: initial;
    width: 240px;
  }

  .r-flow {
    width: initial;
    width: 500px;
  }

  .icon-size {
    width: 10%;
  }

  .logs {
    width: initial;
    width: 760px;
  }

  .logsbox {
    height: 24px;
  }

  .maxcontent {
    width: 960px;
  }

  .maxbox {
    width: 920px;
  }

  .r-trouble {
    width: 920px;
  }
}

/* ----- */
body {
  text-align: center;
  font-family: sans-serif;
  background-color: #E0E0E0;
}

header {
  text-align: center;
  color: #440022;
  font-weight: bold;
}

footer {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  background: #FFFFFF;
  text-align: center;
}

.tmenu {
  font-size: 150%;
  font-weight: bold;
  color: #990000;
  text-align: center;
}

small {
  font-size: 50%;
}

table {
  margin-right: auto;
  margin-left: auto;
  background-color: #FFFFFF;
  border-style: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  /* table-layout: fixed;*/
}

th {
  text-align: center;
}

td {
  padding: 2px 6px;
  word-break: break-all;
  overflow-wrap: break-word;
}

.question {
  font-size: 150%;
  background-color: #FDF9F9;
  color: #BB0000;
  padding: 5px 0px;
}

.answer {
  color: #000066;
  font-weight: bold;
  padding: 10px 0px;
}

.td0 {
  background-color: #F4F4F4;
}

.td1 {
  background-color: #EEEEEE;
}

.thead0 {
  text-align: center;
  border-bottom: solid 2px #777777;
  background-color: #D0D0D0;
}

.thidden {
  background-color: initial;
  border: none 0px;
  text-align: initial;
  width: initial;
}

#centering {
  text-align: center;
}

.tclass {
  border: solid 6px #AAAAAA;
  text-align: left;
  border-style: ridge;
}

.date {
  width: 22%;
  border: solid 1px #AAAAAA;
  background-color: #FAFAFA;
}

.open {
  width: 11%;
  border: solid 1px #AAAAAA;
  background-color: #F5F5F5;
}

.start {
  width: 11%;
  border: solid 1px #AAAAAA;
  background-color: #F5F5F5;
}

.player {
  width: 36%;
  border: solid 1px #AAAAAA;
  background-color: #FFFFFF;
}

.charge {
  width: 20%;
  border: solid 1px #AAAAAA;
  background-color: #FAFAFA;
}

/* Start of Repair */

:root {
  --selfbase: 64;
  --repairflowbordercolor: #AAAAAA;
}

@media screen and (min-width: 960px) {
  :root {
    --selfbase: 128;
  }
}

.repairflow {
  width: calc(var(--selfbase) * 4.8 * 1px);
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
  gap: calc(var(--selfbase) / 8 * 1px);
  font-size: calc(var(--selfbase) / 6 * 1px);
}

.repairflowbox {
  background: #FAFAFA;
  border-top: solid 3px var(--repairflowbordercolor);
  border-left: solid 3px var(--repairflowbordercolor);
  border-right: solid 3px var(--repairflowbordercolor);
}

.repairflowdata {
  text-align: left;
  padding: 0 calc(var(--selfbase) / 16 * 1px);
  border-bottom: solid 3px var(--repairflowbordercolor);
}

.repairflowhead {
  font-weight: bold;
  text-align: center;
  padding: calc(var(--selfbase) / 32 * 1px);
  background: #D0D0D0;
}

.repairtable {
  width: calc(var(--selfbase) * 5.5 * 1px);
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
  gap: calc(var(--selfbase) / 16 * 1px);
  font-size: calc(var(--selfbase) / 6 * 1px);
}

.repairtax {
  width: 100%;
  text-align: right;
  font-size: 70%;
}

.repairbox {
  width: 100%;
  border: solid 3px var(--repairflowbordercolor);
  background: white;
}

.repairhead {
  width: auto;
  font-weight: bold;
  text-align: center;
  padding: calc(var(--selfbase) / 32 * 1px);
  border-bottom: solid 3px var(--repairflowbordercolor);
  background: #D0D0D0;
}

.repair2work {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
}

.repair2workline {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.repair2work+.repair2work {
  border-top: solid 1px var(--repairflowbordercolor);
}

.repairtext {
  padding: 0 calc(var(--selfbase) / 16 * 1px);
}

.repairprice {
  width: calc(var(--selfbase) * 4 * 0.23 * 1px);
  padding: 0 calc(var(--selfbase) / 16 * 1px);
  border-left: solid 1px var(--repairflowbordercolor);
  background: #FAFAFA;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.repair3work {
  width: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
}

.repairpart {
  width: calc(var(--selfbase) / 4 * 1px);
  border-right: solid 1px var(--repairflowbordercolor);
  background: #E0E0E0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.repair3workbox {
  width: 97%;
  display: flex;
  flex-direction: column;
}

.repair3workline {
  display: flex;
  flex-direction: row;
}

.repair3work+.repair3work {
  border-top: solid 1px var(--repairflowbordercolor);
}

.repair3workline+.repair3workline {
  border-top: solid 1px var(--repairflowbordercolor);
}

.repairgallery {
  width: calc(var(--selfbase) * 4 * 1px);
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
  gap: calc(var(--selfbase) / 8 * 1px);
  font-size: calc(var(--selfbase) / 4 * 1px);
}

.repairgallerybox {
  height: calc(var(--selfbase) / 2 * 1px);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 3px var(--repairflowbordercolor);
  border-radius: calc(var(--selfbase) / 6 * 1px);
  background: #D0D0D0;
}

.repairgallerybox>a {
  color: darkviolet;
  text-decoration: none;
}

/* End of Repair */

/* Approach Repair */
.r-approach {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.r-sample {
  display: flex;
  position: relative;
  top: 0px;
  left: 0px;
  background: #FFFFFF;
  border: #AAAAAA 4px solid;
  border-radius: 16px;
  margin-bottom: 4px;
}

.r-sample>img {
  vertical-align: top;
  width: 50%;
  margin: 10px;
}

.r-comment {
  width: 50%;
  ;
  margin: 10px 10px 10px 0px;
  text-align: left;
}

.r-trouble {
  background: #FFFFFF;
}

.r-object {
  display: flex;
  border: solid 3px #AAAAAA;
  background-color: #D0D0D0;
  justify-content: center;
  font-weight: bold;
}

.r-handler {
  display: flex;
  border: solid 3px #AAAAAA;
  border-top: none;
  text-align: left;
  padding: 2px 6px;
}

/* End of Approach Repair */
/* Logs */
.logs {
  font-size: 75%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.logshead,
.logsbox,
.logsdate {
  border: solid 1px #555555;
}

.logshead {
  font-weight: bold;
  background: #BBBBBB;
}

.logsbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #F0F0F0;
  border-top: none;
}

.logsdate,
.logsmsg {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px 6px;
}

.logsdate {
  width: 20%;
  border-top: none;
  border-left: none;
  border-bottom: none;
}

/* End of Logs */

/* Start of Self-made */

:root {
  --selfbase: 64;
}

@media screen and (min-width: 960px) {
  :root {
    --selfbase: 128;
  }
}

.selfbutton {
  text-decoration: none;
}

.selfmenu {
  width: calc(var(--selfbase) * 5 * 1px);
  border-radius: calc(var(--selfbase) / 2 * 1px);
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  background: #FAFFFF;
}

.selficon {
  border-radius: 50%;
  border: 4px solid #FFEEFF;
  width: calc((var(--selfbase) - 8) * 1px);
  height: calc((var(--selfbase) - 8) * 1px);
}

.selfmenutext {
  width: 100%;
  margin-left: calc(var(--selfbase) / 4 * 1px);
  margin-right: calc(var(--selfbase) / 2 * 1px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #777777;
}

.selfspec {
  width: calc(var(--selfbase) * 5.5 * 1px);
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  border: 4px solid #AAAAAA;
}

.selfspecimage {
  width: calc(var(--selfbase) * 1px);
  height: calc(var(--selfbase) / 3 * 10 * 1px);
}

.selfspectext,
.collectiontext {
  padding-left: calc(var(--selfbase) / 16 * 1px);
  text-align: left;
  font-size: calc(var(--selfbase) / 32 * 5 * 1px);
}

.twophotos {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: calc(var(--selfbase) / 2 * 1px);
  margin: 0;
}

h2 {
  font-size: calc(var(--selfbase) / 8 * 3 * 1px);
  margin: 0;
}

h3 {
  font-size: calc(var(--selfbase) / 4 * 1px);
  margin: 0;
  align-self: flex-end;
}

h4 {
  font-size: calc(var(--selfbase) / 4 * 1px);
  margin: 0;
}

/* End of Self-made */

.collection {
  width: calc(var(--selfbase) * 5.5 * 1px);
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  border: 4px solid #AAAAAA;
}

.collection>img,
.collection>video {
  width: calc(var(--selfbase) * 4 * 1px);
  height: calc(var(--selfbase) * 4 * 1px);
}

.collection>video {
  max-width: calc(var(--selfbase) * 4 * 1px);
}

img {
  width: 100%;
  vertical-align: top;
}

small {
  font-size: 70%;
}

#btn {
  webkit-appearance: none;
  border-radius: 20px;
  background-color: #444444;
  color: #BBBBBB;
  height: 75px;
}

.btn-text {
  font-size: 22px;
  height: 80px;
  line-height: 25px;
  padding: 10px 0px;
}

.party {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.partycontent {
  width: 180px;
}

.party>img {
  border-radius: 10px;
  width: 80px;
}

@media screen and (min-width: 960px) {
  .party>img {
    border-radius: 10px;
    width: 200px;
  }

  .partycontent {
    width: 350px;
  }
}

/* Start of Schedule making */

:root {
  --sch-maxbox: 54;
  --sch-maxwidth: calc(var(--sch-maxbox) * 7) + 7;
}

.sch-list {
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

.sch-header {
  font-size: 24px;
  font-weight: bold;
  color: crimson;
}

@media screen and (min-width: 960px) {
  :root {
    --sch-maxbox: 101;
  }

  .sch-list {
    font-size: 18px;
  }

  .sch-header {
    font-size: 36px;
  }
}

:root {
  --sch-maxwidth: calc(var(--sch-maxbox) * 7);
}


.sch-month {
  width: calc(var(--sch-maxwidth) * 1px);
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  background: mistyrose;
}

.sch-m {
  font-weight: bold;
  background: pink;
}

.sch-week {
  width: calc(var(--sch-maxwidth) * 1px);
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

.sch-day {
  width: calc(var(--sch-maxbox) * 1px - 2px);
  display: flex;
  flex-direction: column;
  border: solid 1px black;
}

.sch-day-week {
  width: 100%;
  background: palegreen;
}

.sch-day-head {
  width: 100%;
  background: lightskyblue;
}

.sch-day-content {
  width: 100%;
}

.sch-area {
  width: calc(var(--sch-maxbox) * 1px - 8px);
  height: 80px;
  font-size: 8px;
  line-height: 1;
  padding: 2px;
  margin-bottom: -5px;
}

@media screen and (min-width: 960px) {
  .sch-area {
    height: 120px;
    font-size: 12px;
  }
}

:root {
  --Inquiryw: 132;
  --Inquiryh: 100;
}

@media screen and (min-width: 960px) {
  :root {
    --Inquiryw: 264;
    --Inquiryh: 200;
  }
}
.Inquiryarea {
  width: calc(var(--selfbase) * 4.6 * 1px);
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  background: white;
}

.Inquiryimg {
  width: calc(var(--Inquiryw) * 0.5 * 1px);
  height: calc(var(--Inquiryh) * 0.5 * 1px);
}