* {
    margin: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size:13px;
  }
  
  body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 13px;
    color: #333;
    line-height: 1.8;
    margin: 0;
    overflow-wrap: break-word;
    background-color: #ffffff;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    background-attachment: fixed;
}

/* 管理者専用表示エリア*/
div.zousan {
  background-color:#eeeeee;
  position:absolute;
  opacity       : 0.5;
}
div.zousan_pc {
  width:800px;
  background-color:#ffffee;
  position:absolute;
  left:-805px;
  top:50px;
  opacity       : 1.0;
}
div.zousan:hover {
  opacity       : 0.6;
}



/* 基本項目*/
h1{
    font-size:24px;
    font-weight:bold;
    margin:0px;
    padding:.8em 1em;
    line-height:1.2em;
}

a{
  text-decoration:none;
}
a:hover {
  opacity       : 0.5;         /* カーソル時透明度 */
}

input,select{
	vertical-align:middle;
}

div#area_all{
  width:100%;
  max-width: 800px;
    margin: 0px auto 0 auto;
    background-color:#ffffff;
    padding-bottom: 60px; /* 下部に固定メニューがあるぶんスペースを確保 */
}
/*高解像度用スタイル*/
@media only screen and (min-width: 2000px) {
div#area_all{
  max-width: 1200px;
}
}

div#area_header{
  width:100%;
    margin: 0px auto 0 auto;
    background-color:#000000;
    text-align:center;
    color:#bbbbbb;
}
  
div#area_main {
  background-color:#ffffff;
}
  
div#area_search {
  background-color:#dddddd;
}

div#area_contents {
  position:relative;
  background-color:#ffffff;
}


div#area_side {
  background-color:#ffffff;
  padding-bottom:150px;
}

div#area_footer{
  width:100%;
    margin: 2em 0 0 0;
    background-color:#cccccc;
    text-align:center;
    padding:2em 0 3em 0;
    

}


div#area_header a{
  color:#ffff00;
}

/*pc用スタイル*/
@media only screen and (min-width: 768px) {
  div#area_main {
      display: -webkit-flex;
      display: flex;
  }
  div#area_side {
      -webkit-flex-basis: 300px;
      flex-basis: 300px;
      height:auto;
  }
  div#area_contents {
      -webkit-flex: 1;
      flex: 1;
  }
}

#area_header img{
  max-width: 96%;
  max-height:200px;
  margin:5px 2%;
}

/* 下部固定メニュー */
.fixed-menu {
  position: fixed;   /* 固定表示 */
  bottom: 0;        /* 画面下部に位置指定 */
  left: 0;
  width: 100%;      /* 横幅を画面いっぱいに */
  height: 60px;     /* 任意の高さ */
  background-color: #fff; /* 背景色を好みに合わせて設定 */
  border-top: 1px solid #ccc;
  z-index: 1010;    /* コンテンツより手前に表示させるために設定 */
  line-height:1.1em;
}
@media (max-width: 768px) {
  .fixed-menu {
    position: fixed;
    bottom: 0;
    /* そのほかスマホ用のデザイン */
  }
}

@media (min-width: 769px) {
  .fixed-menu {
    display: none; 
    /* PCの場合は表示しない */
  }
}

.fixed-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;       /* 横並びに */
  justify-content: space-around; /* 均等配置 */
  align-items: center;
  height: 100%;
}

.fixed-menu li {
  flex: 1;
  text-align: center;
}

.fixed-menu a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size:12px;
  font-weight: bold;
  padding: 0.5em 0;
}
.fixed-menu img {
  width:18px;
  height:18px;
}



/* ==============================================================
area_side
============================================================== */


/* area_sideは PC では常時表示したいなら、特に隠さない */
#area_side.menu-content {
  position: static; /* デフォルトで static にしておく */
  width: auto;
  height: auto;
}

/* =========================================
  スマホ・タブレットなど小さな画面用(例: 768px 以下)
========================================= */
@media (max-width: 768px) {
  #area_side.menu-content {
    /* 画面全体にかぶさるように固定配置 */
    position: fixed;
    top: 0;
    right: 0;              /* 右から表示させたいので right: 0; を指定 */
    width: 70%;           /* お好みの幅に調整 */
    height: 100vh;        /* 画面全体の縦幅 */
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);

    /* スクロールを可能にする */
    overflow-y: auto;      /* 縦方向のスクロールバーを自動表示 */
    -webkit-overflow-scrolling: touch; /* iOS 等でのスムーズスクロール */

    z-index: 1000;

    /* 初期状態は画面外（右側）に隠す */
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  /* メニューを開く状態のクラス（JS で付与） */
  #area_side.open {
    transform: translateX(0);     /* 画面内にスライドイン */
  }
}

/* 背景全体を覆う半透明オーバーレイ */
.overlay-bg {
  position: fixed;
  inset: 0; /* top:0, right:0, bottom:0, left:0 と同義 */
  background: rgba(0, 0, 0, 0.8);
  
  /* 初期非表示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* スムーズにフェードイン・アウトさせたい場合は transition を指定 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示状態のクラス（JS から付与） */
.overlay-bg.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



/* ==============================================================
area_search
============================================================== */

#area_search {
  position: sticky; 
  width: auto;
  height: 50px;
  overflow:hidden;
  top: 0px;
  z-index:1000;
  border-bottom:#ffffff solid 5px;
}





.button {
    display       : inline-block;
    border-radius : 10px;          /* 角丸       */
    font-size     : 13pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 15px 15px;   /* 余白       */
    background    : #0ac722;     /* 背景色     */
    color         : #ffffff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    opacity       : 1;           /* 透明度     */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 3px 3px 2px #666666;  /* 影の設定 */
    text-decoration: none;
    font-weight    : bold;
  }
  .button:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    opacity       : 0.5;         /* カーソル時透明度 */
  }

  .button_red{
    display       : inline-block;
    border-radius : 10px;          /* 角丸       */
    font-size     : 13pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 10px 15px;   /* 余白       */
    background    : #ff2200;     /* 背景色     */
    color         : #ffffff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    opacity       : 1;           /* 透明度     */
    transition    : .3s;         /* なめらか変化 */
    box-shadow    : 3px 3px 2px #666666;  /* 影の設定 */
    margin        : 1.5em 0px;
    text-decoration: none;
    font-weight    : bold;
  }
  .button_red:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    opacity       : 0.5;         /* カーソル時透明度 */
  }

  
/* ページ */
.page_part {
    display       : inline-block;
    border-radius : 2px;          /* 角丸       */
    font-size     : 11pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 15px 8px;   /* 余白       */
    background    : #eeeeee;     /* 背景色     */
    border:#555555 solid 1px;
    margin:.5em .1em;
    color         : #000000;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    min-width:40px;
  }
  .page_part:hover {
    opacity       : 0.5;         /* カーソル時透明度 */
  }
  .page_part_now {
    display       : inline-block;
    border-radius : 2px;          /* 角丸       */
    font-size     : 11pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 15px 8px;   /* 余白       */
    background    : #555555;     /* 背景色     */
    border:#000000 solid 1px;
    margin:.5em .1em;
    color         : #ffffff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    min-width:40px;
  }
  .page_part_now :hover {
    opacity       : 0.5;         /* カーソル時透明度 */
  }


/*** グループグリッド ***/
div.group_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px ;
  grid-auto-flow: row dense; ;
}
/*** 関連グループ ***/
div.relation_group_each {
    width:98%;
    height:auto;
    background-color:#ffffff;
    margin:5px 1% 5px 1%;
    padding:0px;
    overflow:hidden;
  }
  div.relation_group_each h3{
    font-size:16px;
    margin:0;
    padding:0;
    line-height:1.2em;
  }
  div.relation_group_each img{
    width:100%;
    height:auto;
    
    margin:0px;
    object-fit: contain;
  }
  div.relation_group_each p{
    font-size:13px;
    color:#000000;
    margin:0;
    padding:0;
    line-height:1.2em;
  }
  
  /* まとめ LABEL */
  span.label_matome_scene {
    display:inline-block;
    background-color:#000099;
    font-size:12px;
    color:#ffffff;
    width:50px;
    padding:.1em;
    text-align:center;
    line-height:1.1em;
  }
  span.label_matome_title {
    display:inline-block;
    background-color:#009900;
    font-size:11px;
    color:#ffffff;
    width:50px;
    padding:.1em;
    text-align:center;
    line-height:1.1em;
  }
  span.label_matome_movie {
    display:inline-block;
    background-color:#990099;
    font-size:12px;
    color:#ffffff;
    width:50px;
    padding:.1em;
    text-align:center;
    line-height:1.1em;
  }
  
  
  

/* カテゴリーリスト */
div.categories_item {
  border-radius : 2px;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 15px 8px;   /* 余白       */
  background    : #eeeeee;     /* 背景色     */
  border:#555555 solid 1px;
  margin:.5em .1em;
  color         : #000000;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  min-width:40px;
}
div.categories_item:hover {
  opacity       : 0.5;         /* カーソル時透明度 */
}


/* アコーディオンの親が持つ子ULは非表示で始める */
.accordion-parent > ul {
  display: none;
  margin-left: 1em; /* 適宜調整 */
}

/* トグルボタンの見た目 */
.toggle-btn {
  cursor: pointer;
  margin-right: 0.5em; 
  /* ここでアイコンを背景画像にしたり、色を変えたりできます */
}

/* カテゴリー階層別修飾 */
ul {
  list-style:none;
  padding-left:1em;
}
ul.level-0 a{
  display       : inline-block;
  border-radius : 2px;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 15px 8px;   /* 余白       */
  background    : #eeeeee;     /* 背景色     */
  border:#555555 solid 1px;
  margin:.5em .1em;
  color         : #000000;     /* 文字色     */
  line-height   : 1.3em;         /* 1行の高さ  */
  min-width:200px;
}
/*pc用*/
@media only screen and (min-width: 1024px) {
  ul.level-0 a {
    padding       : 10px 8px;   /* 余白       */
    border:#cccccc solid 1px;
    margin:.2em .1em;
  }
}
ul.level-0 a:hover {
  opacity       : 0.5;         /* カーソル時透明度 */
}

/* レベル1: 背景に色を付ける例 */
ul.level-1 a{
  background    : #f8f8f8;     /* 背景色     */
  color         : #000000;     /* 文字色     */
}

/* レベル2: 文字サイズを少し小さくする */
ul.level-2 a{
  background    : #ffffff;     /* 背景色     */
  color         : #000000;     /* 文字色     */
}

.toggle-btn {
  background-color:#333333;
  color:#ffffff;
}



/*** カテゴリー検索結果グリッド ***/
div.cate_serched {
  display: inline-block;
  margin-bottom:3em;
}
div.cate_serched a{
  display       : inline-block;
  border-radius : 2px;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 15px 8px;   /* 余白       */
  background    : #eeeeee;     /* 背景色     */
  border:#555555 solid 1px;
  margin:.5em .1em;
  color         : #000000;     /* 文字色     */
  line-height   : 1.3em;         /* 1行の高さ  */
  min-width:200px;
}

.no_hover:hover{
  opacity       : 1.0;         /* カーソル時透明度 */
}

/*** afi API クレジット ***/
div.afi_api_credit{
  width:100%;
  text-align:center;
  margin:1em auto;
  color:#555555;
  font-size:12px;
}
div.afi_api_credit a{
  color:#555555;
  font-size:12px;
  text-decoration:none;
}


/* PRE切り替え */
.change_pre_btn {
  width:50%;
  display       : inline-block;
  border-radius : 5px;          /* 角丸       */
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  padding       : 10px 0;   /* 余白       */
  background    : #555555;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  border        : 2px solid #bbbbbb;    /* 枠の指定 */
  margin-top:.5em;
  font-weight:bold;
}
.change_pre_btn_on {
  background    : #555555;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  cursor        : pointer;     /* カーソル   */
}
.change_pre_btn_off {
  background    : transparent;     /* 背景色     */
  color         : #aaaaaa;     /* 文字色     */
  cursor        : pointer;     /* カーソル   */
}
.change_pre_btn_none {
  background    : transparent;     /* 背景色     */
  color         : #eeeeee;     /* 文字色     */
  border        : 2px solid #eeeeee;    /* 枠の指定 */
}

/* メニューgrouplist */
.menu_group_link {
    position: sticky; 
  width: auto;
  top: 80px;
}
ul {
  list-style:none;
  padding-left:1em;
}
ul.menu_group_link a{
  display       : inline-block;
  border-radius : 2px;          /* 角丸       */
  font-size     : 11pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 15px 8px;   /* 余白       */
  background    : #eeeeee;     /* 背景色     */
  border:#555555 solid 1px;
  margin:.5em .1em;
  color         : #000000;     /* 文字色     */
  line-height   : 1.3em;         /* 1行の高さ  */
  min-width:200px;
}
/*pc用*/
@media only screen and (min-width: 1024px) {
  ul.menu_group_link a {
    padding       : 10px 8px;   /* 余白       */
    border:#cccccc solid 2px;
    margin:.5em .1em;
  }
}
ul.menu_group_link a:hover {
  opacity       : 0.5;         /* カーソル時透明度 */
}