@charset "utf-8";

/*
Theme Name: JUST.WILL
Author: fc-ex.co.jp
*/

*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

:root {
  --main-text: #222;
  --color-red: #c30d23;
  --link-text: #222;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2"),
      url("../fonts/NotoSansJP-Medium.woff2") format("woff2"),
      url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
  font-display: swap;
}

html {
  font-size: 62.5%;
}
body,h1,h2,h3,h4,h5,h6,
p,th,td,dt,dd,li {
  /* font-size: 1.8rem; */
  font-family: "Helvetica Neue",
  Arial, "Noto Sans JP","Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--main-text);
}
h1,h2,h3,h4,h5,h6,
dt,th,b,strong {
  font-weight: 700;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
input,
button {
  border: 0;
}
a,
a:link,
a:visited {
  color: var(--link-text);
  text-decoration: none;
}
@media (hover: hover) {
  /* リンクの場合 */
  a:any-link:hover {
    opacity: .7;
    color: blue;
  }
  /* ボタンの場合 */
  button:enabled:hover {
    opacity: .7;
    color: blue;
  }
  /* 特定できない場合 */
  .button:where(:any-link, :enabled, summary):hover {
  }
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--color-red);
}
header img {
  width: 280px;
}

footer {
  display: none;
}
footer img {
  width: 280px;
}

main {
  width: 100%;
}

.goback {
  margin: 60px auto 40px;
  border-radius: 6px;
  width: 243px;
  height: 50px;
  background: #cacaca;
}
.goback a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: #000;
}

/*
  Outline
------------------*/
.login_style section,
.admin_style section,
.pouring_list .enclosed,
.pouring_detail .enclosed,
.disp_strength_graph .enclosed,
.disp_temperature_graph .enclosed {
  margin: 80px auto;
  border: 1px solid var(--color-red);
  width: min(600px, 100%);
}


/*
  Home型 / .login_style
------------------*/
.login_style section {
  padding: 80px 0 100px;
}
.login_style h1 {
  margin-bottom: 50px;
  text-align: center;
}
.login_style .userid,
.login_style .passwd,
.login_style .forgetpw,
.login_style .login,
.login_style .logout {
  margin: auto;
  width: fit-content;
}
.login_style .userid input,
.login_style .passwd input {
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 16px;
  border-radius: 6px;
  width: 325px;
  height: 45px;
  background: #a6a6a6;
  color: #ececec;
  font-size: 1.8rem;
}
.login_style .userid {
  margin-bottom: 12px;
}
.login_style .passwd {
  position: relative;
  margin-bottom: 20px;
}
.login_style .passwd #view {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  cursor: pointer;
}

.login_style .forgetpw {
  margin-bottom: 30px;
/*  text-align: center;*/
}
.login_style .forget small {
  border-bottom: 1px solid #a6a6a6;
  font-size: 1.2rem;
}
.login_style .login {
  margin-bottom: 120px;
}
.login_style .login button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 325px;
  height: 40px;
  background: var(--color-red);
  color: #fff;
  font-weight: 700;
}
.login_style .logout {
/*  margin-bottom: 180px;*/
  font-weight: 700;
}

/*
  Admin / .admin_style
------------------*/
.admin_style section {
  padding: 80px 0 100px;
}
.admin_style h1 {
  margin-bottom: 50px;
  text-align: center;
}
.admin_style .input_text,
.admin_style .passwd,
.admin_style .input_check,
.admin_style .forgetpw,
.admin_style .regist,
.admin_style .logout {
  margin: auto;
  width: fit-content;
}
.admin_style .input_text input,
.admin_style .passwd input {
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 16px;
  border-radius: 6px;
  width: 325px;
  height: 45px;
  background: #a6a6a6;
  color: #ececec;
  font-size: 1.8rem;
}
.admin_style .input_text,
.admin_style .input_check {
  margin-bottom: 12px;
}
.admin_style .passwd {
  position: relative;
  margin-bottom: 20px;
}
.admin_style .passwd #view {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  cursor: pointer;
}
.admin_style .input_check {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 325px;
  height: 45px;
  font-size: 1.8rem;
}
.admin_style .forgetpw {
  margin-bottom: 30px;
/*  text-align: center;*/
}
.admin_style .forget small {
  border-bottom: 1px solid #a6a6a6;
  font-size: 1.2rem;
}
.admin_style .regist {
  margin-bottom: 120px;
}
.admin_style .regist button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 243px;
  height: 50px;
  background: var(--color-red);
  color: #fff;
  font-weight: 700;
}
.admin_style .regist button:hover {
  color: blue;
}
.admin_style .logout {
/*  margin-bottom: 180px;*/
  font-weight: 700;
}
/*
  AdminList / .admin_list_style
------------------*/
.admin_list_style .search_frame
{
  margin: 40px auto;
  border: 1px solid var(--color-red);
  width: min(600px, 100%);
}
.admin_list_style h1 {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.admin_list_style .input_text,
.admin_list_style .search,
.admin_list_style .logout {
  margin: auto;
  width: fit-content;
}
.admin_list_style .input_text input
{
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 16px;
  border-radius: 6px;
  width: 325px;
  height: 45px;
  background: #a6a6a6;
  color: #ececec;
  font-size: 1.8rem;
}
.admin_list_style .input_text {
  margin-bottom: 12px;
}
.admin_list_style .search {
  margin-bottom: 20px;
}
.admin_list_style .search button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 243px;
  height: 40px;
  background: var(--color-red);
  color: #fff;
  font-weight: 700;
}
.admin_list_style .logout {
/*  margin-bottom: 180px;*/
  font-weight: 700;
}
.admin_list_style table th {
  background: #eee;
}
.admin_list_style .admin_list_table {
  margin: 10px;
}
.admin_list_create {
  margin-top: 20px;
  margin-left: 20px;
} 
.admin_list_create button:hover {
  color: white;
} 
.admin_list_create button {
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 120px;
  height: 40px;
  background: var(--color-red);
  color: #fff;
  font-weight: 500; 
}
.admin_list_create button:hover {
  color: blue;
}
.admin_list_style .search button:hover {
  color: blue;
}
.admin_edit {
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 100px;
  height: 40px;
  background: var(--color-red);
  color: #fff;
  font-weight: 500; 
}
.admin_delte {
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  width: 100px;
  height: 40px;
  background: #a6a6a6;;
  color: #fff;
  font-weight: 500; 
}


/*
  Sub page
*/
.pouring_list section,
.pouring_detail section,
.disp_strength_graph section,
.disp_temperature_graph section {
  padding-bottom: 72px;
}
.pouring_list h1,
.pouring_detail h1,
.disp_strength_graph h1,
.disp_temperature_graph h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  font-size: 2.3rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-red);
}

.pouring_list ul.spot_link {
  margin: 50px auto;
  padding-bottom: 35px;
  border-radius: 6px;
  width: 300px;
  height: 142px;
  box-shadow: 3px 3px 10px 3px rgba(0,0,0,.1);
  /* スクロール機能 */
  overflow: scroll;
}
.pouring_list ul.spot_link li {
  border-bottom: 1px solid #ececec;
}
.pouring_list ul.spot_link li a {
  position: relative;
  display: block;
  padding: 10px .75em ;
  width: 100%;
}

.pouring_list ul.detail_link,
.pouring_detail ul.links,
.disp_strength_graph ul.links,
.disp_temperature_graph ul.links {
  margin: 50px auto 0;
  width: 243px;
}
.pouring_list ul.detail_link li,
.pouring_detail ul.links li,
.disp_strength_graph ul.links li,
.disp_temperature_graph ul.links li {
  margin-bottom: 25px;
  border: 2px solid var(--color-red);
  border-radius: 6px;
  height: 50px;
}
.pouring_list ul.links li:last-child
.disp_strength_graph ul.links li:last-child
.disp_temperature_graph ul.links li:last-child {
  margin-bottom: 0;
}
.pouring_list ul.detail_link li a, 
.pouring_detail ul.links li a,
.disp_strength_graph ul.links li a,
.disp_temperature_graph ul.links li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 2.2rem;
}

.pouring_detail h1,
.disp_strength_graph h1,
.disp_temperature_graph h1 {
  position: relative;
}
.pouring_detail h1 a, 
.disp_strength_graph h1 a, 
.disp_temperature_graph h1 a {
  display: none;
}
.pouring_detail table.sensors {
  margin: 50px auto 40px;
  border-radius: 6px;
  width: 250px;
  box-shadow: 3px 3px 10px 3px rgba(0,0,0,.1);
}
.pouring_detail table.sensors thead, 
.pouring_detail table.sensors tbody {
  display: block;
}
.pouring_detail table.sensors tbody {
  height: 150px;
  overflow: scroll;
}
.pouring_detail table.sensors th {
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  width: 250px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.pouring_detail table.sensors td {
  border-bottom: 1px solid #ececec;
  text-align: center;
  width: 250px;
}
.pouring_detail table.sensors tr:last-child th,
.pouring_detail table.sensors tr:last-child td {
  border-bottom: none;
}
.pouring_detail h2,
.disp_strength_graph h2,
.disp_temperature_graph h2 {
  margin-bottom: 20px;
  font-size: 2.2rem;
  text-align: center;
}
.pouring_detail table.details,
.disp_strength_graph table.details,
.disp_temperature_graph table.details {
  margin: 0 auto;
  border-radius: 6px;
  width: 300px;
  box-shadow: 3px 3px 10px 3px rgba(0,0,0,.1);
  border-collapse: collapse;
}
.pouring_detail table.details tr:nth-of-type(even) th,
.pouring_detail table.details tr:nth-of-type(even) td, 
.disp_strength_graph table.details tr:nth-of-type(even) th,
.disp_strength_graph table.details tr:nth-of-type(even) td,
.disp_temperature_graph table.details tr:nth-of-type(even) th,
.disp_temperature_graph table.details tr:nth-of-type(even) td  {
  background: #ececec;
}
.pouring_detail table.details th, 
.disp_strength_graph table.details th, 
.disp_temperature_graph table.details th {
  width: 110px;
  padding: 0 16px;
  text-align:center;
  text-align-last: justify;
  font-weight: 400;
}
.pouring_detail table.details th,
.pouring_detail table.details td, 
.disp_strength_graph table.details th,
.disp_strength_graph table.details td, 
.disp_temperature_graph table.details th,
.disp_temperature_graph table.details td {
  height: 40px;
  vertical-align: center;
}
.pouring_detail table.details td,
.disp_strength_graph table.details td, 
.disp_temperature_graph table.details td  {
  padding-right: 16px;
  text-align: right;
}

@media screen and (max-width: 599px) {
  body {
/*    display: block;*/
/*    padding-bottom: 100px;*/
/*    height:1px;*/
/*    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0;*/
    min-height: 1px;
  }
  main {
    flex: unset;
  }
  header {
    display: none;
  }
  footer {
    display: flex;
    justify-content: center;
/*    margin-top: 100px;*/
    margin-top: 60px;
    padding: 6px 0 0 0;
    width: 100%;
    height: 100px;/*
    position: fixed;
    bottom: 0;*/
  }
  .login_style section,
  .pouring_list .enclosed,
  .pouring_detail .enclosed,
  .disp_strength_graph .enclosed,
  .disp_temperature_graph .enclosed {
    margin: auto;
    border: none;
  }

  .login_style section {
    padding-bottom: 0;
  }
  /* スクロール機能 */
  .pouring_list ul.spot_link {
    overflow: scroll;
  }
  .pouring_list h1,
  .pouring_detail h1 {
    height: 40px;
  }
  .pouring_detail h1 a, 
  .disp_strength_graph h1 a, 
  .disp_temperature_graph h1 a {
    position: absolute;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
  }
  .pouring_detail h1 a img {
    width: 16px;
  }
  .goback {
    border-radius: unset;
    width: 243px;
    height: 50px;
    text-align: center;
    background: #cacaca;
  }
  .goback a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    color: #000;
  }
}

/*選択されたラジオボタンの行の背景色を変える*/
input:checked + label {
  background-color: #CEF6F5;
}

/* ローディング処理 */
.loading_gif {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url(/images/common/loading.gif) center center no-repeat;
}

#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
 }