/*
 *
 * base
 *
 */

@font-face {
  font-family: "ClarikaProGeo-Lt";
  src: url("../webFonts/ClarikaProGeoLt/font.woff2") format("woff2"), url("../webFonts/ClarikaProGeoLt/font.woff") format("woff"); }
@font-face {
  font-family: "ClarikaProGeo-Md";
  src: url("../webFonts/ClarikaProGeoMd/font.woff2") format("woff2"), url("../webFonts/ClarikaProGeoMd/font.woff") format("woff"); }
@font-face {
    font-family: "Noto Sans JP";
    src: url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
  }
@font-face {
    font-family: "Sawarabi Mincho";
    src: url("https://fonts.googleapis.com/css?family=Sawarabi+Mincho");
  }
@font-face {
    font-family: "Playfair";
    src: url("https://fonts.googleapis.com/css2?family=Playfair:wght@300;400;500&display=swap");
  }

 :root {
  --bodycolor: #000;
  --selectedcolor: #5d6b01;
  --subcolor: #999999;
  --bgcolor: #ffffff;
  --alertcolor: #e85c41;
  --serif: "Playfair",  serif;
  --sansserif: "ClarikaProGeo-Lt",  sansserif;
  --serif-jp: "Sawarabi Mincho";
  --sansserif-jp: "Noto Sans JP",
}

body{
  background-color: var(--bgcolor);
  color: var(--bodycolor);
  font-family: var(--sansserif);
  font-size: 0.9rem;
  line-height: 1.3rem;
  font-style: normal;
  text-align: justify;
  margin-bottom: 4rem;
}
  a, a:visited, a:active {
  color: var(--bodycolor);
  text-decoration: none;
  border-bottom: 1px solid var(--bodycolor); }
  a:hover {
  color: var(--selectedcolor);}

  .body-jp{
  font-family: var(--sansserif-jp);
  font-size: 0.8rem;
  line-height: 1.4rem;
  font-style: normal;
  text-align: justify;
  margin-bottom: 1rem;
  }

.sub{
  color: var(--subcolor);
}
.italic{
  font-style: italic;
}coration: underline;
}
.m0{
  margin: 0;
  padding: 0;
}
.centre{
  text-align: center;
}
.hidden{
  display:none;
}
.menu{
  margin: 0 auto;
  padding: 2rem;
  text-align: left;
  font-family:  var(--sansserif);
  font-size: 1rem;
}
a.menulink, a.menulink:visited, a.menulink:active {
  color: var(--subcolor);
  margin-right: 1rem;
  text-decoration: none;
  border-bottom: none}
a.menulink:hover {
  color: var(--selectedcolor);}

a.menulink_selected, a.menulink_selected:visited, a.menulink_selected:active {
  color: var(--subcolor);
  margin-right: 1rem;
  text-decoration: none;
  border-bottom-color: var(--subcolor);}
a.menulink_selected:hover {
  color: var(--selectedcolor);}

a.menutitlelink, a.menutitlelink:visited, a.menutitlelink:active {
  color: var(--bodycolor);
  margin-right: 1rem;
  text-decoration: none;
  border-bottom: none}
a.menutitlelink:hover {
  color: var(--selectedcolor);}




/* title - exhibition*/
h1 {
  font-family:  var(--serif);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  color: var(--bodycolor);
  margin-top: 2rem;
}

/* sub info - exhibition*/
h2{
  font-family:  var(--sansserif);
  font-weight: 300;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 2rem;
  color: var(--subcolor);
  border-bottom: none;
  }

  h2 a, h2 a:visited, h2 a:active {
  color: var(--bodycolor);
  text-decoration-line: none;
  border-bottom: none;} 
  h2 a:hover {
  color: var(--selectedcolor);
  border-bottom: none;}

/* about headline- not in use */
  h3 {
  font-family:  var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: 2rem;
  line-height: 2rem;
  color: var(--bodycolor);
  margin-bottom: 8rem;
  padding: 0;}

/* about list headline */
  h4 {
  font-family:  var(--serif);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  text-align: left;
  color: var(--bodycolor);
  margin-top:10rem;
  margin-bottom:2.2rem;
  padding: 0;}

  /* subscribe letter page title*/
  h5{
  font-family: var(--sansserif);
  color: var(--bodycolor);
  font-size: 1.3rem;
  line-height: 1.5rem;
  padding-top: 2rem;
  margin-bottom: 1rem;
  }

  /* newsletter (latest) title */
  h6{
  font-family: var(--sansserif);
  color: var(--bodycolor);
  font-weight:700 ;
  font-size: 1rem;
  padding-left: 0;
  margin-bottom: 0;
  }

  .caption{
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.4rem;
  text-align: right;
  color: var(--subcolor);
  margin:0px 0px 0.5rem 0px;
  padding: 0;
  }

  .list{
    line-height: 1.4rem;
    margin-bottom: 0.2rem;
  }
  .list-tab{  
    line-height: 1.5rem;
    width: 75%;
    float:left;
    margin-bottom: 0.5rem;
  }
  .list-label{
    line-height: 1.5rem;
    width: 4rem;
    float:left;
  }

  /* form */
  .astri-required {
    text-align: right;
    font-size: 0.8rem;
    margin-right: 0;
    float:right;
  }
  .asteri{
    color:  var(--alertcolor);
    font-size: 1.5rem;
    font-weight: normal;
    position: relative;
    top: 5px;
  }
  .form-signup{
    clear: left;
    font: var(--sansserif);
    font-size: 1rem;
    width: 600px;
    margin: 0;
  }
  .form-field input{
    display: block;
    width: 100%;
    padding: 8px 0;
    text-indent: 2%;
  }
  .form-button{
    clear: both;
    background-color: #111;
    border: 0 none;
    border-radius: 4px;
    transition: all 0.23s ease-in-out 0s;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: normal;
    height: 2rem;
    line-height: 2rem;
    margin: 1rem 0 0 0;
    padding: 0 1rem;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    width: fit-content;
  }
  input:invalid {
  　border: 2px dashed red;
　}
　input:invalid:required {
  　border: 2px dashed red;
　}
　input:valid {
  　border: 2px solid black;
　}