@charset "UTF-8";
/* base, main, footer, コンテンツページ共通, header, whatsgsz, characters */
/*======================================
* base
======================================*/
html {
  font-size: 62.5%;
}

body {
  font-family: Lato, 'Noto Sans JP', 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  background-color: #fff;
}

a {
  text-decoration: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 1220px;
  margin: 0 auto;
}

/*======================================
* main
======================================*/
main {
  margin-top: 19px;
  margin-bottom: 86px;
}

.main-contents {
  width: 100%;
  height: 428px;
  margin-bottom: 3.1rem;
  background: url("../img/hero/hero-bg.png") no-repeat;
  position: relative;
}
.main-contents__logo {
  position: absolute;
  top: 9px;
  left: 67px;
}
.main-contents__character {
  position: absolute;
  top: 44px;
  left: calc(50% - 172.5px);
}

.nav-left ul {
  width: 239px;
  height: 300px;
  background: url("../img/nav/nav-leftbg.png") no-repeat;
  position: absolute;
  top: 135px;
  left: 77px;
}
.nav-left__item_1, .nav-left__item_2, .nav-left__item_3, .nav-left__item_4 {
  position: absolute;
  top: 39px;
  left: 41px;
}
.nav-left__item_1 a, .nav-left__item_2 a, .nav-left__item_3 a, .nav-left__item_4 a {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-left__item_2 {
  top: 96px;
  left: 61px;
}
.nav-left__item_3 {
  top: 166px;
  left: 21px;
}
.nav-left__item_4 {
  top: 232px;
  left: 78px;
}

.nav-right ul {
  width: 199px;
  height: 372px;
  background: url("../img/nav/nav-rightbg.png") no-repeat;
  position: absolute;
  top: 64px;
  left: 935px;
}
.nav-right__item_5, .nav-right__item_6, .nav-right__item_7, .nav-right__item_8, .nav-right__item_9 {
  position: absolute;
  top: 38px;
  left: 49px;
}
.nav-right__item_5 a, .nav-right__item_6 a, .nav-right__item_7 a, .nav-right__item_8 a, .nav-right__item_9 a {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-right__item_6 {
  top: 103px;
  left: 65px;
}
.nav-right__item_7 {
  top: 165px;
  left: 26px;
}
.nav-right__item_8 {
  top: 233px;
  left: 80px;
}
.nav-right__item_9 {
  top: 298px;
  left: 26px;
}

.nav-right__item_8 ul {
  display: none;
  transition: 0.2s ease-in-out;
  width: 148px;
  height: 61px;
  background: url("../img/nav/nav-sns.png") no-repeat;
  position: relative;
  top: -37px;
  left: -218px;
}
.nav-right__item_8-twitter, .header-item__8-twitter {
  position: absolute;
  top: 6px;
  left: 42px;
}
.nav-right__item_8-twitter a, .header-item__8-twitter a {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-right__item_8-instagram, .header-item__8-instagram {
  position: absolute;
  top: 34px;
  left: 34px;
}
.nav-right__item_8-instagram a, .header-item__8-instagram a {
  display: block;
  width: 100%;
  height: 100%;
}

.item-sns,
.item-switch {
  cursor: pointer;
}

.nav-left__item_3 ul {
  display: none;
  width: 277px;
  height: 85px;
  background: url("../img/nav/nav-switch.png") left top/contain no-repeat;
  position: relative;
  top: 3px;
  left: -21px;
  z-index: 2;
}
.nav-left__item_3-gsz1, .nav-left__item_3-gsz2 {
  display: flex;
  width: 100%;
  height: 100%;
}
.nav-left__item_3-gsz1 img, .nav-left__item_3-gsz2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav-left__item_3-gsz1 {
  display: block;
  width: 138.5px;
  height: 60px;
}
.nav-left__item_3-gsz2 {
  display: block;
  width: 138.5px;
  height: 70px;
}

ul.onClickSns {
  display: block !important;
  width: 148px;
  height: 61px;
  position: absolute;
  top: 22px;
  left: 16px;
  background: url("../img/nav/nav-sns.png") no-repeat;
  z-index: 999;
}

ul.onClickSwitch {
  display: flex !important;
  align-items: center;
  width: 277px;
  height: 85px;
  position: absolute;
  top: 22px;
  left: 16px;
  background: url("../img/nav/nav-switch.png") left top/contain no-repeat;
  z-index: 999;
}

.info {
  display: flex;
}

.announcement {
  display: flex;
  flex-direction: column;
  width: 643px;
}
.announcement-head {
  width: 100%;
  margin-bottom: 2.4rem;
}
.announcement-list ul {
  font-size: 1.7rem;
  list-style: none;
}
.announcement-list li {
  display: flex;
  line-height: 2em;
  color: #655c3c;
}
.announcement-list__date {
  margin-right: 2em;
  color: #b98041;
}

.wide-indent {
  display: block;
  text-indent: 1em;
}

.topics {
  display: flex;
  flex-direction: column;
  width: 557px;
  margin-left: 17px;
}
.topics a {
  outline: none;
}

.slick-dots li button:before {
  content: '';
  background: top left url("../img/slide/off.png") no-repeat;
}

.slick-dots li.slick-active button:before {
  background: top left url("../img/slide/on.png") no-repeat;
}

/*======================================
* footer
======================================*/
footer {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer-contents {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.footer-border {
  width: 100%;
  margin-bottom: 1.7rem;
}
.footer-right p {
  font-size: 1.25rem;
  line-height: 2.28rem;
  text-align: end;
  color: #231815;
}

/*======================================
* コンテンツページ共通
======================================*/
.inner-wrapper__whatsgsz {
  width: 100%;
  height: 684px;
  margin: 2rem auto 1.6rem;
  background: url("../img/whatsgsz/whats-bg.png") no-repeat;
}
.inner-wrapper__whatsgsz:before {
  content: '';
  display: block;
  width: 1220px;
  height: 684px;
  position: absolute;
  top: 20px;
  background: rgba(255, 255, 255, 0.35);
}
.inner-wrapper__characters {
  width: 100%;
  height: 684px;
  margin: 2rem auto 1.6rem;
  background: url("../img/characters/characters-bg.png") no-repeat;
}

.contents-wrap {
  position: relative;
}

/*======================================
* header
======================================*/
header {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
}
header ul {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  width: 1198px;
  height: 50px;
  padding: 7px;
  list-style: none;
  background: url("../img/header/header-bg.png") no-repeat;
}

.header-item {
  display: block;
  height: 26px;
  position: relative;
}
.header-item ul {
  display: none;
}

.back-to-the-home {
  display: block;
  width: 132px;
  height: 42px;
  background: url("../img/header/back-to-the-home-bg.png") no-repeat;
  position: absolute;
  left: 14px;
  top: 6px;
}
.back-to-the-home img {
  display: block;
  width: 42px;
  height: 19px;
  position: absolute;
  left: 58px;
  top: 11px;
}

/*======================================
* whatsgsz
======================================*/
.title-whatsgsz {
  width: 246px;
  height: 103px;
  background: url("../img/whatsgsz/title-bg.png") no-repeat;
  position: absolute;
  top: 49px;
  left: 16px;
}
.title-whatsgsz img {
  position: absolute;
  top: 21px;
  left: 38px;
}

.charatower {
  position: absolute;
  top: 45px;
  left: 1065px;
}

.book {
  width: 859px;
  height: 589px;
  background: url("../img/whatsgsz/book-bg.png") no-repeat;
  position: absolute;
  top: 13px;
  left: 190px;
}
.book-txt {
  position: absolute;
  top: 40px;
  left: 86px;
}
.book-character-1 {
  position: absolute;
  top: 311px;
  left: 242px;
}
.book-character-2 {
  position: absolute;
  top: 365px;
  left: 451px;
}
.book-character-3 {
  position: absolute;
  top: 482px;
  left: 449px;
}

/*======================================
* characters
======================================*/
.title-characters {
  width: 246px;
  height: 103px;
  background: url("../img/characters/title-bg.png") no-repeat;
  position: absolute;
  top: 21px;
  left: 156px;
}
.title-characters img {
  position: absolute;
  top: 17px;
  left: 49px;
}

.characters-tree {
  width: 601px;
  height: 578px;
  background: url("../img/characters/characters-tree.png") no-repeat;
  position: absolute;
  top: 33px;
  left: 541px;
}
.characters-tree ul {
  list-style: none;
}
.characters-tree li {
  display: block;
  position: absolute;
  cursor: pointer;
}
.characters-1 {
  top: 144px;
  left: -14px;
}
.characters-2 {
  top: 67px;
  left: 61px;
}
.characters-3 {
  top: 184px;
  left: 129px;
}
.characters-4 {
  top: 300px;
  left: 229px;
}
.characters-5 {
  top: 70px;
  left: 221px;
}
.characters-6 {
  top: 14px;
  left: 308px;
}
.characters-7 {
  top: 156px;
  left: 323px;
}
.characters-8 {
  top: 98px;
  left: 396px;
}
.characters-9 {
  top: 192px;
  left: 430px;
}

.character-board {
  position: absolute;
  top: 139px;
  left: 79px;
}
.character-board img {
  display: block;
  position: absolute;
}

.infoShow {
  display: block;
  z-index: 999;
}

/*# sourceMappingURL=style.css.map */