@charset "utf-8";

:root {
  --color-text: #333;
  --color-border: #cfcfcf;
  --scrollbar: 0;
}

html {
  font-size: 16px;
}
main {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;
  font-size: 1rem;
  font-weight: 500;
  background-color: transparent;
  color: var(--color-text);
  line-height: 1.7;
  position: relative;
}
main::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  z-index: -1;
}
main section:not(#bibliography) a {
  color: var(--color-text);
  text-decoration: none;
}
main section:not(#bibliography) img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

main section:not(#bibliography) h4 {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: 'Roboto', 'Noto Sans JP', sans-serif !important;
}

.contentArea {
    max-width: 1280px; margin: auto;
/*  border-left: solid 2px var(--color-border);
  border-right: solid 2px var(--color-border);
*/}


main nav ul, main nav dl, main nav dt, main nav dd {
  margin: 0;
  padding: 0;
}

nav.selectNav ul {
  display: flex;
  list-style: none;
}
nav.selectNav ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
}
nav.selectNav ul li.selected {
  background-color: #f6f6f6;
}
nav.selectNav ul li[data-select="oden"].selected {
  background-color: #e6f9ef;
}
nav.selectNav ul li[data-select="nerimono"].selected {
  background-color: #ffeee2;
}
nav.selectNav ul li[data-select="nabe"].selected {
  background-color: #fff4c3;
}
nav.selectNav ul li[data-select="traditional"].selected {
  background-color: #e2f1ff;
}
nav.selectNav ul li[data-select="shogatsu"].selected {
  background-color: #ffe6ee;
}
nav.selectNav ul li[data-select="pedia"].selected {
  background-color: #ede3ff;
}
nav.selectNav ul li:not(.selected) {
  cursor: pointer;
}

.pc { display: block;}
.sp { display: none; }

@media print, screen and (min-width: 769px) {
  nav.selectNav ul {
    border-top: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
    border-right: 2px solid var(--color-border);
    border-left: 2px solid var(--color-border);
}
  nav.selectNav ul li {
    height: 80px;
  }
  nav.selectNav ul li:not(:last-child) {
    border-right: 2px solid var(--color-border);
  }
}
@media screen and (max-width: 768px) {
  .pc              { display: none; }
  .sp              { display: block; }
  nav.selectNav ul {
    flex-wrap: wrap;
    border-top: 1px solid var(--color-border);
    font-size: 3.7vw;
  }
  nav.selectNav ul li[data-select="all"] {
    display: none;
    display: flex;
    width: 100%;
  }
  nav.selectNav ul li {
    width: calc(100% / 3);
    height: 54px;
    height: 62px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 1em;
  }
  nav.selectNav ul li:nth-child(3n+1) {
    border-right: 0;
  }
}

nav.contentsNav.filtered section:not(.selected) {
  display: none; 
}
nav.contentsNav section {
  overflow: hidden; 
  position: relative;
}
nav.contentsNav section + section {
  margin-top: 80px;
  /*border-top: 2px solid var(--color-border);*/
}
nav.contentsNav.filtered section.selected {
  margin-top: 0;
  margin-bottom: 80px;
  border-top: 0;
}
nav.contentsNav section:last-child {
  margin-bottom: 80px;
}
.section_heading {
  position: relative;
}
.section_heading h3 { display: flex; justify-content: center; align-items: center; width: 100%; font-weight: 500 !important; font-weight: 700 !important; color: #333; position: relative; font-family: 'Roboto', 'Noto Sans JP', sans-serif !important; }
.section_heading h3::before { content: ''; display: block; border-radius: 50%; background-color: #009944; margin-right: 10px; }

.section_heading .caption { position: absolute; top: 50%; transform: translate(0,-50%); right: 5%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; font-size: 1.1em!important; }
.section_heading .caption::after { content: "　＞"; }

.section_heading:hover .caption { -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s;
      transition: all 1s;
      opacity: 1;}

@media print, screen and (min-width: 769px) {
  .section_heading h3 {
    height: 85px;
    font-size: 1.5rem;
  }
  .section_heading h3::before {
    width: 21px;
    height: 21px;
  }
}
@media screen and (max-width: 768px) {
    nav.contentsNav section + section {
      margin-top: 40px;
      /*border-top: 2px solid var(--color-border);*/
    }
  .section_heading h3 {
    height: 54px;
    height: 62px;
    font-size: 1.1rem!important;
  }
  .section_heading h3::before {
    width: 17px;
    height: 17px;
  }
  .section_heading .caption { position: absolute; top: 50%; transform: translate(0,-50%); right: 5%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 1; font-size: 0.8em!important; line-height: 1.1; }
}
section > dl {
  display: flex;
}
section > dl:last-child {
  border-bottom: 2px solid var(--color-border);
  transition: border-color 0.3s cubic-bezier(0.23, 1, 0.58, 1); 
}
section > dl > dt {
  display: flex;
  align-items: center;
  width: 180px;
  border-top: 2px solid var(--color-border);
  border-right: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
  position: relative;
}
@media screen and (max-width: 768px) {
  section > dl:last-child {
    border-bottom: 1px solid var(--color-border);
  }
  section > dl > dt {
    width: 80px;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-left: 0;
  }
}

section > dl > dt h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  line-height: 1;
  font-weight: 700;
  font-size: 0.88rem;
}
section > dl > dt h4::before {
  content: '';
  font-family: FontAwesome;
  font-size: 18px;
  line-height: 1;
  color: #6fba2c;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #009944;
  background-color: #fff;
  margin-bottom: 5px;
}
section > dl.basic > dt h4::before {
  content: '\f4d8';
}
section > dl.life > dt h4::before {
  content: '\f2e7';
}
section > dl.history > dt h4::before {
  content: '\f66f';
}
section > dl.culture > dt h4::before {
  content: '\f6a1';
}
section > dl.geography > dt h4::before {
  content: '\f0ac';
}
section > dl.data > dt h4::before {
  content: '\f02d';
}
section > dl.common > dt h4::before {
  content: '\f02b';
}
section > dl.chronology > dt h4::before {
  content: '\f073';
}
section > dl.glossary > dt h4::before {
  content: '\f00b';
}
section > dl > dd {
  width: calc(100% - 180px);
  border-top: 2px solid var(--color-border);
  transition: border-color 0.3s cubic-bezier(0.23, 1, 0.58, 1); 
}
@media print, screen and (min-width: 769px) {
  section:hover > dl,
  section:hover > dl > dt,
  section:hover > dl > dd {
    border-color: rgba(240, 240, 238, 0);
  }
}
section dd.contents > ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  section > dl > dd {
    width: calc(100% - 80px);
    border-top: 1px solid var(--color-border);
  }
  section dd.contents > ul {
    margin-left: -1px;
  }
}
.section_bg {
  opacity: 0;
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center / cover;
  transform: scale(1);
  transition: opacity 0.3s; 
}
section#oden .section_bg {
  background-image: url(../img/bg_oden.webp);
}
section#nerimono .section_bg {
  background-image: url(../img/bg_nerimono.webp);
}
section#nabe .section_bg {
  background-image: url(../img/bg_nabe.webp);
}
section#traditional .section_bg {
  background-image: url(../img/bg_traditional.webp);
}
section#shogatsu .section_bg {
  background-image: url(../img/bg_shogatsu.webp);
}
section#pedia .section_bg {
  background-image: url(../img/bg_pedia.webp);
}
@media print, screen and (min-width: 769px) {
  section:hover .section_bg {
    opacity: 1; 
    z-index: -1;
    transition: opacity 0.3s;
  }
  .section_bg-img {
    transition: opacity 0.3s, transform 0.3s;
  }
  section:hover .section_bg-img {
    transform: scale(1.4);
    transition: opacity 0.3s, transform 20s linear;
  }
}
.item {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 8px 0;
  line-height: 1;
  transition: border-color 0.3s cubic-bezier(0.23, 1, 0.58, 1); 
}
.item.remainder {
  border-bottom: 0;
}
@media print, screen and (min-width: 769px) {
  .item {
    border-right: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
    width: 33.333%;
    padding: 0;
    height: 85px;
  }
  .item:nth-child(3n) {
    border-right: 1;
  }
  section:hover .item {
    border-color: rgba(240, 240, 238, 0);
  }
}
@media screen and (max-width: 768px) {
  .item {
    border-bottom: 1px solid var(--color-border);
  }
  .item:last-child {
    border-bottom: 0;
  }
  
  .category_inner {
  width: 80px !important;
  margin: 10px 0;
  padding: 0 15px;
  padding: 0 5px!important;
  }

}


.item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none; 
  color: inherit;
  align-items: center;
  justify-content: center;
}
.item_bg {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.mask {
  content: '';
  display: block;
  opacity: 1;
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.58, 1); 
  background: #fff;
}
@media print, screen and (min-width: 769px) {
  section:hover .mask {
    opacity: 0.8; 
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.47, 1.26);
  }
  .item:hover .mask {
    opacity: 0.9; 
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border-radius: 10px;
  }
}
.item_title {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  padding: 0 15px;
  transition: color 0.4s cubic-bezier(0.23, 1, 0.58, 1); 
  font-size: 3.7vw;
}
.item_title::before {
  content: '';
  content: '●';
  display: block;
/*  width: 11px;
  height: 11px;*/
  border-radius: 50%;
/*  background-color: #009944;*/
  color: #6fba2c;
  font-size: 11px;
  margin-right: 10px;
}
.item_title .series {
  margin-right: 1em;
  font-size: 3vw;
}
.item_title sub {
  transform: translateY(25%);
}


.category a {
  display: flex;
  align-items: center;
  height: 100%;
}
.category_inner {
  display: flex;
  align-items: center;
  width: 180px;
  margin: 10px 0;
  padding: 0 15px;
  box-sizing: border-box;
  transition: color 0.4s cubic-bezier(0.23, 1, 0.58, 1); 
  font-size: 3.7vw;
}

@media print, screen and (max-width: 768px) {
  .item_title {
      padding: 5px 30px;
  }
}

@media print, screen and (min-width: 769px) {
  .item_title {
    padding: 0 30px;
    font-size: 1.15rem;
    font-weight: 700;
  }
  .item_title .series {
    font-size: 0.812rem;
  }

}

section#oden > dl > dt h4::before {
  color: #6fba2c;
  border: 2px solid #009944;
  border: 2px solid #6fba2c;
}
section#oden .section_heading h3::before,
section#oden .item_title::before {
  background-color: #009944;
  background-color: #6fba2c;}
section#nerimono > dl > dt h4::before {
  color: #ffa500;
  border: 2px solid #eb6100;
  border: 2px solid #ffa500;
}
section#nerimono .section_heading h3::before,
section#nerimono .item_title::before {
  background-color: #eb6100;
  background-color: #ffa500;
  color: #ffa500;
}
section#nabe > dl > dt h4::before {
  color: #ffcf04;
  border: 2px solid #ffcf04;
}
section#nabe .section_heading h3::before,
section#nabe .item_title::before {
  background-color: #ffcf04;
  color: #ffcf04;
}
section#traditional > dl > dt h4::before {
  color: #7fc1fe;
  border: 2px solid #7fc1fe;
}
section#traditional .section_heading h3::before,
section#traditional .item_title::before {
  background-color: #7fc1fe;
  color: #7fc1fe;
}
section#shogatsu > dl > dt h4::before {
  color: #ff6393;
  border: 2px solid #ff6393;
}
section#shogatsu .section_heading h3::before,
section#shogatsu .item_title::before {
  background-color: #ff6393;
  color: #ff6393;
}
section#pedia > dl > dt h4::before {
  color: #9470dc;
  border: 2px solid #9470dc;
}
section#pedia .section_heading h3::before,
section#pedia .item_title::before {
  background-color: #9470dc;
  color: #9470dc;
}

.main-visual img {
  width: 100%;
  height: auto;
}

section#bibliography {
  font-weight: 400;
}