html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto','Noto Sans JP', sans-serif;
  color: #555;
  font-size: 1.4rem;
  line-height: 1.8;
  background: #f1f1f1;

  width: 100%;
  margin: 0 auto;
/* footer下部固定用 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;

}

img {
  max-width: 100%;
  height: auto;
}

a:link,
a:visited {
  color: #222;
  text-decoration: none;
  transition: all .3s;
}
a:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.6;
}
a img {
  opacity: 1;
  transition: all .3s;
}
a img:hover {
  opacity: 0.6;
}

/*  */

a {
  cursor: pointer;
  color: #222;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
}
a:focus {
  outline: thin dotted;
}
a:not([href]):not(class), a:not([href]):not([class]):hover {
  cursor: default;
  color: inherit;
  text-decoration: none;
}

a.link-btn_detail {
  width: 160px;
  display: block;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 1;
} 

/* h */
/* @media (max-width: 699px) { */
@media (max-width: 959px) {
  h1 { font-size: 2.7rem; line-height: 3.2rem; }
  h2 { font-size: 2.4rem; line-height: 3.6rem; }
  h3 { font-size: 2rem;}
  h4 { font-size: 1.25rem;}
  h5 { font-size: 1.25rem;}
  h6 { font-size: 1rem;}
  p {
    font-size: 1.3rem;
    margin: 0 0 2rem;
  }
}

@media (min-width: 960px) {
  h1 { font-size: 3.6rem; line-height: 4.8rem; }
  h2 { font-size: 2.4rem; line-height: 3.6rem;}
  h3 { font-size: 2rem;}
  h4 { font-size: 1.25rem;}
  h5 { font-size: 1.25rem;}
  h6 { font-size: 1rem;}
  p {
    font-size: 1.6rem;
    margin: 0 0 2rem;
  }
}
/*  */
/* 
h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
} 
*/
/* p:last-child { margin: 0;} */

/*  */
ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin: 0 0 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0;
}

dt {
  font-weight: 400;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

/* b,
strong {
  font-weight: 700;
}

.small {
  font-size: 0.875em;
}

.read {
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0.04rem;
}

mark {
  padding: 0.2em;
  background-color: currentColor;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
} */

/*  */
main,
footer {
	width: 100%;
  /* margin: 0 auto;
  padding: 0; */
}

/* //////////////////////////////////////////////////////////////// */



/* Home //////////////////////////////////////////////////////////////// */

.HomeWrapper {
  margin: 24px auto;
  padding: 0;
  width: clamp( 420px, 84%, 1200px);
}

.HomeWrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 12px;
}

@media (max-width: 419px) {
  .HomeWrapper ul {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 420px) and (max-width: 599px) {
  .HomeWrapper ul {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 600px) and (max-width: 719px) {
  .HomeWrapper ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 720px) and (max-width: 959px) {
  .HomeWrapper ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .HomeWrapper ul {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

/*  */

.HomeWrapper {
  font-family: 'Noto Serif JP', serif;
}

.HomeWrapper h2 {
  border-top: 4px solid #222;
  color: #222;
  font-weight: 700;
}

.HomeWrapper ul li {
  /* margin: 0; */

  overflow:hidden;
  position:relative;
  padding: 0 0 72px;
  font-size: 2.4rem;

  border: #ccc 1px solid;

}

.HomeWrapper ul li a {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width: 100%;
  color: #222;
  padding: 12px;
}

.HomeWrapper ul li a:hover {
  background: #ddd;
  color: #000;
}

.HomeWrapper ul li:before{
  content: "";
  display: block;
  padding-top: 66%;
}

/* //////////////////////////////////////////////////////////////////// */


.Wrapper {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  color: #222;
  background: #fff;

  display: block;

  /* height: 1200px; */
}
/*  */


.Wrapper h2 {
  font-size: 2.4rem;
  color: #000;
  padding: 0;
  margin: 12px 0;

  width: 100%;
  padding: 12px;
  background: #fff;
}

.Wrapper h2 span {
  display: block;
  font-weight: 400;
  font-size: 2.1rem;
  margin: -20px 0 0;
  color: #f0b43b;
}

.Wrapper ul {
  list-style: none;
  padding: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

/* .Wrapper ul li {
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  border-top: #eee 1px solid;
  padding: 12px 0 0;
} */

/* .Wrapper ul li:last-child{
  border-bottom: #eee 1px solid;
  padding: 12px 0 12px;
} */

/* .Wrapper ul:after {
  content: "";
  display: block;
  height: 0;
}  */

/* ul.MemberList li, 
ul.AchievementList li {
  display: grid;
  color: #aaa;
} */



.Wrapper-3 {
  height: 420px;
  /* 60px * 3 + 240px */
}

.Wrapper-5 {
  height: 540px;
  /* 60px * 5 + 240px */
}

.Wrapper-6 {
  height: 600px;
  /* 60px * 5 + 240px */
}

.Wrapper-7 {
  height: 660px;
  /* 60px * 5 + 240px */
}

.Wrapper-8 {
  height: 720px;
  /* 60px * 5 + 240px */
}

.Wrapper-9 {
  height: 780px;
  /* 60px * 5 + 240px */
}

.Wrapper-10 {
  height: 840px;
  /* 60px * 5 + 240px */
}

.Wrapper-11 {
  height: 900px;
  /* 60px * 5 + 240px */
}

.Wrapper-12 {
  height: 960px;
  /* 60px * 5 + 240px */
}

.Wrapper-13 {
  height: 1020px;
  /* 60px * 5 + 240px */
}

/* //////////////////////////////////////////////////////////////// */

.timeTable {
  position: relative;
}

.timeTable_Person,
.timeTable_Period,
.timeTable_Year {
  position: absolute;
  width: 100%;
}

/*  */
.timeTable_Person {
  margin-top: 96px;
  z-index: 3;
}

.timeTable_Person .PersonBox {
  position: relative;
  margin: 0 0 12px;

  background:rgba(100,100,100,0.1);
  /*  */
}

.timeTable_Person .PersonBox .PersonName-Prof,
.timeTable_Person .PersonBox .PersonLifeTime {
  position: absolute;
  display: grid;
  gap: 0;
  width: 100%;
}

.timeTable_Person .PersonBox .PersonName-Prof {
  grid-template-columns: 1fr 1fr;
  padding: 0 12px;
  z-index: 21;

  font-size: 1.6rem;
  line-height: 1.5;
  margin: 1px 0 0;
}

.timeTable_Person .PersonBox .PersonName-Prof .PersonProf {
  text-align: right;
}

.timeTable_Person .PersonBox .PersonLifeTime {
  padding: 0 20px;
}

.timeTable_Person .PersonBox .PersonLifeTime .LifeTime {
  background: rgba(48,48,48,0.2);
  /*  */
  z-index: 20;
}
/*  */
.timeTable_Person .PersonBox,
.timeTable_Person .PersonBox .PersonLifeTime .LifeTime {
  height: 48px;
}

/* .timeTable_Year */

.timeTable_Year {
  display: grid;
  gap: 0;
  z-index: 1;
}

.division_1 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.division_2 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.division_3 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.division_4 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.division_5 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.division_6 {
  grid-template-columns: 20px 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 20px;
}

.timeTable_Year .YearLine {
  background: #f7f7f7;
}

.timeTable_Year .YearLine-0 {
  background: #ccc;
}

.timeTable_Year .YearLine-d {
  background: #ddd;
}

.timeTable_Year .YearLine-e {
  background: #eee;
}

.timeTable_Year div div {
  transform: rotate( 90deg );
}

/* .timeTable_Period */

.timeTable_Period {
  display: grid;
  gap: 0;
  z-index: 2;
  opacity: 0.1;
}

.timeTable_Period-division1_1000-2000 {
  grid-template-columns: 20px 45.30fr 54.80fr 20px;
}

.timeTable_Period-division2_0-2000 {
  grid-template-columns: 20px 23.75fr 48.85fr 27.40fr 20px;
}

.timeTable_Period-division3_-1000-2000 {
  grid-template-columns: 20px 49.17fr 32.57fr 18.27fr 20px;
}

.timeTable_Period-division4_-2000-2000 {
  grid-template-columns: 20px 61.88fr 24.43fr 13.70fr 20px;
}

.timeTable_Period-division5_-3000-2000 {
  grid-template-columns: 20px 69.50fr 19.54fr 10.96fr 20px;
}

.timeTable_Period-division6_-4000-2000 {
  grid-template-columns: 20px 74.58fr 16.28fr 9.13fr 20px;
}

.timeTable_Period .PeriodAncient {
  background: #713838;
}

.timeTable_Period .PeriodMediaeval {
  background: #bf780d;
}

.timeTable_Period .PeriodModern {
  background: #72bf0d;
}


/* //////////////////////////////////////////////////////////////// */




/* .testBoxOut {
  width: 100%;
  height: 1000px;
  background: #fff;
} */

/* .testBoxIn {
  width: 50%;
  height: 250px;
  background: #fff;
}

.testBoxInIn {
  width: 100%;
  height: 250px;
  background: #aaa;

  padding: 20px;
}

.testBoxInInIn {
  width: 100%;
  height: 200px;
  background: #555;
}

.testBox1 {
  height: 50px;
  width: 40%;
  margin: 0 40% 0 20%;
  background: #111;

}

.testBox2 {
  height: 50px;
  width: 60%;
  margin: 0 20% 0 20%;
  background: #111;

} */



/* /////////////////////////////// */

/*	Common */


.TitleBox {
  width: 90%;
  max-width: 800px;
  margin: 24px auto;
  padding: 24px;
  background: rgba(255, 255, 255, .88);
}

.TitleBox h1 {
  color: #f0b43b;
}

p.Lead {
  font-weight: 400;
  padding: 24px 0 0;
  margin: 24px 0 ;
  border-top: #ccc 4px solid;
  color: #555;
}

p.Lead span {
  display: block;
  text-align: right;
  color: #aaa;
  font-size: 1.2rem;
  padding: 24px 0 0;
}



@media (max-width: 959px) {
  ul.MemberList li,
  ul.AchievementList li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

li .ListName,
li .ListTitle {
  color: #555;
}

@media (min-width: 960px) {
  ul.MemberList li {
    grid-template-columns: 1fr 1fr 3fr;
    gap: 12px;
  }
  ul.AchievementList li  {
    grid-template-columns: 2fr 1fr 5fr 3fr;
    gap: 12px;
  }
}

/*	footer */
footer {

  text-align: center;
  background: #ddd;
  color: #fff;
/* 下部固定用： */
  margin-top: auto;
}

.footerWrapper {
  margin: 0;
	padding: 24px 0 6px;

  font-size: 1rem;
  font-weight: 100;
}