/*PC表示、スマホ表示で共通の設定CSS*/

@charset "utf-8";

* {
  box-sizing: border-box;
}

/*全般の設定*/
body {
  margin: 0px;
  font-family: "Shippori Mincho", Noto Sans, Noto Sans JP, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, Arial, sans-serif;
  color: #904E43;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: -moz-linear-gradient(top, #222222, transparent);
  background: -webkit-linear-gradient(top, #222222, transparent);
  background: linear-gradient(to bottom, #222222, transparent);
}

footer {
  color:#F7F0DD;
  background-color: #904E43;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

footer a {
  color: rgb(72, 73, 122);
}

a {
  text-decoration: none;
  color: #fff;
}

nav {
  margin: 0 0 0 auto;
}

div {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

dd {
  margin-left: 10px;
  margin-right: 10px;
}

img {
  vertical-align:bottom;
  max-width: min(100%, 95vw);
}

/*以下各種背景の設定*/
.main {
  background-size: 100%;
  background-position: top center;
  background-repeat: repeat-y;
}

.back_about {
  background-image: url(img/bg/BG_about.jpg);
  background-size: cover;
  background-position: center;
}

.back_story {
  background-image: url(img/bg/BG_story.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.back_cast {
  background-image: url(img/bg/BG_cast.jpg);
  background-size: cover;
  background-position: center;
}

.back_info {
  background-image: url(img/bg/BG_info.jpg);
  background-size: cover;
  background-position: center;
}

.back_goods{
  background-image: url(img/bg/BG_goods.jpg);
  background-size: cover;
  background-position: center;
}

.back_notes {
  background-image: url(img/bg/BG_notes.jpg);
  background-size: cover;
  background-position: center;
}

/*イントロ・コンテンツ・一部アイコン前後の空白設定*/
.info_xmas_box{
  padding: 0.2em 0.5em;
  margin: 2em 0;
  background-color: rgba(255, 255, 255, 0.3);
  /*box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.3);*/
  border-radius: 8px;
}

.info_format_icon{
  margin:5px;
}

/*マップの設定(細かいことはPC,SP個別設定)*/
.map {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
}

/*GOODS設定*/
#GOODS .goods_block {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  margin: 10px 10px;
}

#GOODS img {
  max-width: 100%;
  max-height: 100%;
}

#GOODS .goods_image {
  background: radial-gradient(rgba(34, 34, 34, 0.5), transparent 70%, transparent);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#GOODS .goods_name {
  font-size: 15px;
  font-weight: bold;
  margin: 5px 0px;
}

#GOODS .goods_detail {
  font-size: 14px;
}

/*NOTESタイトル・リスト設定*/

.notes_title_box {
  color: #222222;
  position: relative;
  margin-bottom: 20px;
  font-size: max(16px, min(24px, 24px + (100vw - 500px) / 20));
  font-weight: bold;
  text-align: center;
}

#NOTES {
  font-size: 18px;
}

#NOTES ul {
  padding-left: 0px;
  margin-left: 10px;
}

#NOTES ul ul {
  text-align: left;
  list-style-type: circle;
  margin-top: 2px;
  margin-bottom: 2px;
}

#NOTES li {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 15px;
}


/*アコーディオンメニュー設定（今回はNOTES用）*/
.toggle_title {
  cursor: pointer;
}

.toggle_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.toggle_btn:before, .toggle_btn:after {
  display: block;
  content: "";
  background-color:#904E43;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.toggle_title.selected .toggle_btn:before {
  content: normal;
}

.toggle_contents dd {
  display: none;
}

/*スクロールしたらすっと表示する箱の設定*/

.box {
  opacity: 0;
  transition: .5s;
}

.active {
  opacity: 1;
  top: 0;
}

/*クレジット表記（カタマリごとに改行）*/
.credit {
  display: inline-block;
  margin: 2px 10px;
}