/* --- 基本リセット --- */
body, header, article, h1, p, figure, figcaption, img, nav, footer, h2, ol, ul, li, table, th, td {
  margin: 0;
  padding: 0;
}

/* 横スクロール防止（全ページ共通） */
html {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}
ul, li {
  list-style: none;
}
img {
  border: none;
}
html {
  scroll-behavior: smooth;
}


/* --- body全体 --- */
body {
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background-color: #9b9;
  margin-bottom: 100px;
}


/* --- header, footer --- */
header {
  width: 99%;
  text-align: left;
  font-family: 'Hiragino Maru Gothic Pro', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 23px;
  color: #fc9;
  font-weight: 700;
  margin: 10px;
}
header a:link,
header a:visited,
header a:hover,
header a:active {
  color: #fc9;
}
footer {
  color: #4a6622;
  margin-right: 20px;
  text-align: right;
  line-height: 2;
  clear: both;
}

/* --- 見出し類（サイト全体で統一） --- */
h1 {
  color: #fff;
}
h2, h3, h4 {
  font-size: 18px ;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: 5px;
  margin-top: 32px;
  margin-bottom: 8px;
  clear: both;
}
h2 { background-color: #fc9; }
h3 { background-color: #beb; }
h4 { background-color: #ddc; }
.decoration {
  font-size: 25px ;
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  margin: 20px;
}
.decoration:before,
.decoration:after {
  content: "■■";
  font-size: 18px;
  letter-spacing: 8px;
  vertical-align: middle;
  color: #fc9;
}
.title {
  font-size: 25px ;
  font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
  margin: 20px;
}
.title:before,
.title:after {
  content: "■■";
  font-size: 18px;
  letter-spacing: 8px;
  vertical-align: middle;
  color: #fc9;
}


/* --- 区切り・ユーティリティ類 --- */
.divider {
  height: 1px;
  background-color: #fff;
  border: 0;
}
.clear { clear: both; }


/* メインコンテンツ */
.content-wrapper {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 150%;
  word-break: normal;
  padding: 20px;
  color: #330;
  background: #eed;
}

.content-wrapper p {
	margin-top: 3em
}

.content-wrapper a:link {
  color: #33f;
}
.content-wrapper a:active {
  color: #f66;
}
.content-wrapper a:visited {
  color: #c0f;
}
.content-wrapper a:hover {
  color: #f66;
}


/* テーブル */
caption {
  text-align: left;
}
th {
  font-weight: 400;
}
th, td {
  padding-left: 1em;
}


/* --- 汎用クラス --- */
.line-break {
	display: block; /* インライン要素をブロック要素として強制的に改行させる */
}
.nowrap {
  white-space: nowrap;
}
.left {
  float: left;
  margin: 3px;
}
.right {
  text-align: right;
}
.s {
  font-size: 12px;
}
.m {
  font-size: 16px;
  font-weight: 400;
}
.mbold {
  font-size: 16px ;
  font-weight: 700;
}
.l {
  font-size: 20px ;
}
.time {
  display: block;
  text-align: right;
  font-size: 0.8em;
}
.item {
  display: inline-block;
  width: 120px;
  text-align: center;
  margin: 10px;
}
.item img {
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* 写真回り込み */
.photo{
		float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* パンくずリスト全体 (ol) */
.breadcrumb ol {
  /* リストマーカーを削除 */
  list-style: none; 
  /* paddingやmarginをリセット */
  padding: 0;
  margin: 0;
  /* 子要素 (li) を横並びにするためにFlexboxを使用 */
  display: flex;
}

/* リストアイテム (li) */
.breadcrumb li {
  /* 縦方向に配置されたli間の余白を調整 */
  margin-right: 0.5em; /* 適切な余白を設定 */
  /* liの中に改行を許可しない */
  white-space: nowrap;
}

/* 最後の要素以外の li の後ろに区切り文字 > を表示 */
.breadcrumb li:not(:last-child)::after {
  content: " >"; /* 区切り文字とスペース */
  margin-left: 0.5em; /* 区切り文字の左側にスペース */
}

/* 最後の要素はリンクがないため、装飾を調整 */
.breadcrumb li:last-child {
  /* 最後の要素は区切り文字を不要にするため、::afterは適用されない */
  /* 必要に応じて、最後の要素の色や太さを変えることもできます */
  font-weight: bold;
}

.breadcrumb {
	text-align: left;
    font-size: 0.8em
}

/* ページトップへ戻るボタン */
.gotop {
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #999;
  border-radius: 7px;
  padding-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 85%;
  text-decoration: none;
  color: #333 ;
  opacity: .5;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}
.gotop::before {
  content: "";
  display: block;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  width: 25%;
  height: 25%;
  top: 25%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  transform: rotate(-45deg);
}
.gotop:hover {
  opacity: 1;
}


/* ナビゲーション */
.nav {
  display: block;
  width: 300px;
  padding: 5px;
  clear: both;
  color: #330 ;
  background: linear-gradient(#fc9, #eed);
  border: 1px solid #fc9;
  text-align: center;
  border-radius: 5px;
  box-shadow: 2px 2px 4px gray;
}
.nav:hover {
  box-shadow: 0 0 2px gray;
  transform: translateY(2px);
}
.nav a:link,.nav a:visited,.nav a:hover,.nav a:active {
  color: #330;
}


/* レスポンシブメディアクエリ */
@media only screen and (max-width: 599px) {
  form {
    position: absolute;
    top: 60px;
    right: 5px;
    z-index: 100;
  }
  header + .divider {
    margin-top: 60px;
  }
img {
  max-width: 100%;
  height: auto;
  }
  section {
    margin-left: 0;
    margin-right: 0;
  }

  .content-wrapper {
    width: 90%;
    margin-bottom: 20px;
  }
  article img, .details, .aff {
    max-width: 96%;
    height: auto;
  }
  .decoration:before, .decoration:after {
    font-size: 12px;
  }

  .gotop {
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    opacity: 1;
    border: none;
    background: none;
    bottom: 10px;
    right: 10px;
  }
  .gotop::before {
    bottom: 0;
  }

  #global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
/* メニュー全体を最前面に！ */
    z-index: 9999;
  }

  /* 開閉ボタンの箱 */
  #global > div {
    width: 30px;
    height: 30px;
    background: #ffe;
    position: absolute;
    top: 0;
    right: 0;
/* z-index: 200; を削除するか、低い値にする */
    z-index: auto;
  }

  /* 開くボタン（初期表示） */
  .globalopen {
    display: block;
    pointer-events: auto;
  }

  /* 閉じるボタン（閉じているときは非表示） */
  .globalclose {
    display: none;
    pointer-events: auto;
  }

  /* --- スライドメニュー本体 --- */
  #global ul {
    background: #ffe;
    width: 80%;           /* 一般的な幅（右80%） */
    height: 100%;
    position: absolute;
    top: 30px;
    right: 0;

    /* ▼ 初期状態：画面外に隠しておく */
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: auto;
  }

  #global li {
    padding: 10px;
    border-bottom: 1px #330 solid;
  }

  /* --- open状態（JSで .open を付与） --- */
  #global.open ul {
    transform: translateX(0); /* ここで右→左へスライド */
  }

  #global.open .globalopen {
    display: none;
  }

  #global.open .globalclose {
    display: block;
  }
}


@media only screen and (min-width: 600px) {

  section {
    margin: 0 16px;
  }
  .globalopen, .globalclose {
    display: none;
  }
  #global {
    z-index: 1 !important;
  }

  #global ul {
    transform: none !important;
    transition: none !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  #global.open ul {
    transform: none !important;
  }
  #global {
    list-style-type: none;
  }
  #global li a, .nolink {
    display: block;
    height: 44px;
    line-height: 44px;
    padding: 1px;
    margin-right: 2px;
    margin-bottom: 2px;
    border: 1px solid #300;
    border-radius: 5px;
    text-decoration: none;
    background-color: #eed;
    background: linear-gradient(#fc9, #eed);
    color: #330;
  }
  #global a:hover {
    color: #333;
    background: linear-gradient(#eee, #fff);
  }
  #global li {
    float: left;
  }
}


@media only screen and (min-width: 600px) and (max-width: 899px) {
  form {
    position: absolute;
    top: 110px;
    right: 20px;
  }
  header + .divider {
    margin-top: 90px;
  }
  .content-wrapper {
    width: 80%;
    margin-top: 0;
    margin-bottom: 100px;
  }
  .article-body--book {
    padding-left: 50px;
  }
  article img {
    max-width: 100%;
    height: auto;
  }
  #global {
    position: absolute;
    left: 240px;
    top: 10px;
    width: 308px;
  }
  #global li a, .nolink {
    width: 70px;
    font-size: 11px;
  }
}


@media only screen and (min-width: 900px) {
  form {
    position: absolute;
    top: 60px;
    right: 20px;
  }
  .content-wrapper {
    margin-bottom: 50px;
  }
  .base, .article-body--book {
    width: 70%;
  }
  .article-body--book {
    padding-left: 100px;
  }
  header + .divider {
    margin-top: 40px;
  }
  #global {
    position: absolute;
    left: 205px;
    top: 10px;
  }
  #global li a, .nolink {
    width: 70px;
    font-size: 11px;
    padding: 1px;
  }
}


@media only screen and (min-width: 1280px) {
  body {
    width: 1250px;
  }
}