/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */

body {
  font-family: 'Noto Sans JP', sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* Common
--------------------------------------------------------------------*/

/* For modern browsers */
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
  zoom: 1;
  overflow: hidden;
}

/*--------------------------------------------------------------------
Color settings
--------------------------------------------------------------------*/
:root {
  --color-1st: #95745d;
  --color-2nd: #b63d0a;
  --color-3rd: #3e241a;
  --color-4th: #e5e1d8;
  --color-5th: #bdaa9c;
  --color-white: #fff;
  --color-black: #151515;
  --color-ccc: #ccc;
  --color-999: #999;
  --color-666: #666;
  --color-333: #333;
  --color-222: #222;
  --color-fb: #fbfbfb;
  --color-f8: #f8f8f8;
  --color-f5: #f5f5f5;
  --color-f0: #f0f0f0;
  --color-tel: #e64f18;
  --color-web: #b10139;
  --color-wrapper: #f3f3ef;
  --font-min:"Noto Serif JP", serif;
}

/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

header {
  width:100%;
  height: 100px;
  display: block;
  padding:0 2%;
  background-color: var(--color-black);
  background-image: url(../img/pagetitle/pt-viewer_sys.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}
header h1 {
  width:fit-content;
  height: 100px;
  display: block;
  font-size:24px;
  font-weight: 400;
  font-family: var(--font-min);
}
header h1 a {
  width:100%;
  height: 100px;
  display: block;
  line-height: 100px;
  text-decoration: none;
  color: var(--color-white);
}
header h1 a:hover {
  text-decoration: none;
  color: var(--color-white);
}

/* Footer */
footer {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding:20px 0px;
  background-color: var(--color-3rd);
}
footer p {
  font-size:12px;
  line-height: 1.25em;
  color:var(--color-white);
  margin:0;
}
footer p a {
  text-decoration: none;
  color: var(--color-white);
}
footer p a:hover {
  text-decoration: none;
  color: var(--color-white);
}

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  header {
    width:100%;
    height: 100px;
    display: block;
    padding:0 2%;
    background-color: var(--color-black);
    background-image: url(../img/pagetitle/pt-viewer_sys.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
  }
  header h1 {
    width:fit-content;
    height: 100px;
    display: block;
    font-size:24px;
    font-weight: 400;
    font-family: var(--font-min);
  }
  header h1 a {
    width:100%;
    height: 100px;
    display: block;
    line-height: 100px;
    text-decoration: none;
    color: var(--color-white);
  }
  header h1 a:hover {
    text-decoration: none;
    color: var(--color-white);
  }

  /* Footer */
  footer {
    width:100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px 0px;
    background-color: var(--color-3rd);
  }
  footer p {
    font-size:12px;
    line-height: 1.25em;
    color:var(--color-white);
    margin:0;
  }
  footer p a {
    text-decoration: none;
    color: var(--color-white);
  }
  footer p a:hover {
    text-decoration: none;
    color: var(--color-white);
  }


}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  header {
    width:100%;
    height: 60px;
    display: block;
    padding:0 2%;
    background-color: var(--color-black);
    background-image: url(../img/pagetitle/pt-viewer_sys.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
  }
  header h1 {
    width:fit-content;
    height: 60px;
    display: block;
    font-size:24px;
    font-weight: 400;
    font-family: var(--font-min);
  }
  header h1 a {
    width:100%;
    height: 60px;
    display: block;
    line-height: 60px;
    text-decoration: none;
    color: var(--color-white);
  }
  header h1 a:hover {
    text-decoration: none;
    color: var(--color-white);
  }

  /* Footer */
  footer {
    width:100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:20px 0px;
    background-color: var(--color-3rd);
  }
  footer p {
    font-size:12px;
    line-height: 1.25em;
    color:var(--color-white);
    margin:0;
  }
  footer p a {
    text-decoration: none;
    color: var(--color-white);
  }
  footer p a:hover {
    text-decoration: none;
    color: var(--color-white);
  }

}