@charset"utf-8";

body {
  background-color: rgb(255, 255, 255);
}

/* wrapper */
.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* ヘッダー */
header {
  height: 250px;
  line-height: normal;
  padding-bottom: 10px;
  background-color: rgba(255, 166, 0, 0.65);
  text-align: center;
  width: auto;
  border-top: 30px solid #000;
}

header h1 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 3rem;
  font-style: italic;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

header p {
  font-family: 'Times New Roman', Times, serif;
}

/* ヘッダーエンド */

/* slicksize */
.visual02 {
  height: 72px;
}

.visual03 {
  height: 200px;
}





/* 以下、bxSliderカスタマイズ 251126 by X */
.bx-wrapper {
  width: 300px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-color: rgb(0, 8, 31);
}

.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: rgb(1, 14, 53);
}

.slider {
  margin: 0 auto;
}



/* plus */


/* 動画のコンテナ */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* コンテンツの後ろに配置*/
  overflow: hidden;
}

/* iframeを全画面に広げる */
.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vw;
  /* 16:9 の比率 */
  min-height: 100vh;
  min-width: 100vh;
  /* 16:9 の比率 */
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* 動画をクリックできないようにする */
}

/* 上に載せるコンテンツのスタイル */
.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 20%;
}

/* nav */
.global {
  background-color: black;
}

.global ul {
  display: flex;

}

.global ul li {
  width: 200px;
  height: 80px;
}

.global ul li a {
  display: block;
  color: gold;
  line-height: 40px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border: 1px solid rgb(251, 246, 222);
  border-radius: 20px;
}

.global ul li a:hover {
  background-color: ghostwhite;
}

.global.hamburger {
  display: none;

}

/* nav ここまで*/


/* めいん */
/* じぎょう */
.comingsoon h1 {
  width: 12%;
  margin-top: 100px;
  background-color: yellowgreen;
  text-align: center;
  border: 2px solidn navy;
  border-radius: 5px;
}

.comingsoon h2 {
  margin-top: 100px;
  background-color: rgba(255, 235, 205, 0.536);
}

.comingsoon p {
  background-color: rgba(255, 235, 205, 0.536);
}

.moviebox h1 {
  width: 12%;
  margin-top: 100px;
  background-color: yellowgreen;
  text-align: center;
  border: 2px solidn navy;
  border-radius: 5px;
}

.moviebox h2 {
  margin-top: 100px;
  background-color: rgba(255, 235, 205, 0.536);
}

/* じぎょうここまで*/


/* sitemap */
.sitemap01 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(50, 205, 50, 0.629);
  border-bottom: 1px solid black;
  padding-right: 5p;

}

.sitemap01 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}

.sitemap02 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(50, 205, 50, 0.629);
  border-bottom: 1px solid black;
  padding-right: 5px;
}

.sitemap02 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}

.sitemap03 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(166, 208, 166, 0.629);
  border-bottom: 1px solid black;
  padding-right: 5px;
}

.sitemap03 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}



.sitemap04 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(166, 208, 166, 0.629);
  border-bottom: 1px solid black;
  padding-right: 5px;
}

.sitemap04 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}



.sitemap05 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(166, 208, 166, 0.629);
  border-bottom: 1px solid black;
  padding-right: 5px;
}

.sitemap05 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}



.sitemap06 {
  text-align: right;
  margin-right: 20px;
  font-size: 0.9rem;
  background-color: rgba(166, 208, 166, 0.629);
  border-bottom: 1px solid black;
  margin-top: 450px;
  padding-right: 5px;
}

.sitemap06 p {
  margin-bottom: 3px;
  /* margin-right: 5px; */
}





/* sitemap kokomade*/


.detail01 {
  margin-top: 20px;
  margin-bottom: 600px;

}

.detail01 button {
  border: 1px solid black;
}


/* 書籍概要 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

.picturebook {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
  color: #fff;
  line-height: 2rem;
}

.container {
  position: relative;
  /* 基準点 */
  width: 100%;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: auto;
  display: block;
}

/* 共通の影設定（文字を読みやすくする） */
.pos-title, .pos-description, .pos-list li {
  text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
  position: absolute;
  width: 90%;
  /* 左右に少し余白を作る */
  left: .5%;
  margin: 0;
}

/* --- 【微調整ポイント】各パーツの位置 --- */

.pos-title {
  top: 10%;
  /* 上からの位置 */
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.pos-description {
  top: 0.5%;
  /* 中央付近 */
  right: 0%;
  font-size: 1.1rem;
  text-align: center;
  line-height: 1.9;
}

.pos-list {
  position: absolute;
  bottom: 10%;
  /* 下からの位置 */
  left: 30%;
  font-size: 2rem;
  list-style-position: inside;
  /* リストの点を内側に */
  padding: 0;
  columns: 1;
  /* スマホでは1列、PCでは2列にするなどの調整も可 */
  text-align: center;
}

.pos-list ol {
  padding-left: 0;

}

.pos-list li {
  position: static;
  /* リスト内はabsoluteを解除 */
  width: 100%;
  margin-bottom: 5px;
  background-color: rgba(246, 248, 225, 0.472);
  left: 50%;
  padding: 5px;
  text-align: start;
  border-radius: 0 35px 0 15px;
}

.pos-title {
  top: 12%;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 3rem;
  color: #f7cfcf;
}

.pos-list {
  line-height: 2.5rem;
  position: absolute;
  bottom: 10%;
  left: 30%;
  font-size: 1.8rem;
  list-style-position: inside;
  padding: 0;
  columns: 1;
  text-align: center;
  color: #fcfcfc;
}

.comingsoon h2 {
  margin-top: 100px;
  background-color: rgba(255, 235, 205, 0.536);
  font-size: 1.5rem;
  color: red;
  font-weight: 600;
}

.comingsoon p {
  background-color: rgba(255, 235, 205, 0.536);
  color: rgb(255, 255, 255);
}

comingsoon h2 {
  margin-top: 100px;
  background-color: rgba(255, 235, 205, 0.536);
  color: blue;
}



/* <div class="demonsgame"> */
.demonsgame p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
  color: bisque;
  border-top: 6px solid red;
  border-bottom: 6px solid red;
  width: 70%;

}

.demonsgame {
  width: 90%;
  margin-bottom: 50px;

}

.demonsgame h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem;
  color: bisque;


  .damonsgame span {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: rgb(170, 149, 123)0;
  }

  /* border-top: 2px solid navy;
border-bottom: 2px solid navy; */
}

.dramadetail {
  font-family: serif;
  width: 50%;
  background-image: url(../images/shinigamibg02.JPG);
  color: #f6f2f2;
  margin: 0 auto;
  padding: 5%;
  border-radius: 20px;
}

.dramadetail h4 {
  font-size: 2rem;
  padding: 3%;
  background-color: #53010151;
}

.textbox {
  width: 90%;
  background-color: rgba(98, 64, 1, 0.362);
  border-radius: 10px;
  margin: 0 auto;
  padding-bottom: 20px;
  line-height: 2.5rem;

}

.textbox p {
  line-height: 1.4rem;
  font-size: 1rem;
  color: #ffffff;
  background-color: #5c010161
}

.flex {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.5rem;
}

.himitsu {
  line-height: 1.4rem;
  font-size: 1rem;
  color: #ffffff;
  background-color: #5c0101a9;
}

/* <div class="demonsgame">kokomade */

/* drama */
.kv img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
  border: 3px dotted navy;
}

/* dramakokomade */


/* らいんなっぷ */

.video, .publish, .design {
  color: red;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2rem;
}


/* らいんなっぷ えんど*/

/* フォトライブラリー*/
div.libbox {
  display: flex;
  justify-content: space-evenly;
}

/* フォトライブラリー ここまで*/

/* movieライブラリー */
.libbox .slider {
  width: 400px;
  height: 450px;
}

/* movieライブラリー  ここまで*/


/* news */

.news {
  width: 80%;
  height: 450px;
  padding: 10px;
  border: 1px solid red;
  margin-bottom: 100px;
  line-height: 1.5rem;
  margin: 0 auto;
  background-color: #f6f2f254;
  overflow: auto;
}

.news dt {
  font-weight: 600;
}

.news h4 {
  font-size: 2rem;
}


/* news end*/

.sponsord h5 {
  font-size: 2rem;
  color: blue;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.sponsord p {
  font-size: 1.5rem;
  color: navy;
}


.sup h5 {
  font-size: 2rem;
  color: blue;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.sup p {
  font-size: 1.5rem;
  color: navy;
}




/* another*/

.secondarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.796);
  margin-top: 150px;
}





/* nav footer*/
#footernav {
  background-color: black;
}

.nav11 ul {
  padding: 0;
  display: block;
  list-style-type: none;

}

.nav11 ul li {
  width: 240px;
  text-decoration: none;

}

.nav11 ul li a {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  display: block;
  color: rgb(251, 214, 4);
  line-height: 40px;
  font-weight: 150;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid rgb(123, 103, 2);
  padding: 0px 0px;
}

.nav11 ul li a:hover {
  background-color: ghostwhite;
}





/* fotter */

footer {
  width: 100%;
  height: auto;
  background-color: orange;
  text-align: center;
  display: flex;
  justify-content: space-around;
}

address dl {
  text-align: start;
  margin-top: 100px;

}

address dt {
  font-weight: 600;

}

.link {
  display: block;
}


/* fotter  ここまで*/







/* ふぉーむ */
.messe {
  width: 200px;
  height: 100px;
}

.text {
  width: 300px;
  height: 200px;
  margin: 0 auto;
}


/* ふぉーむここまで */

.picturebook h2 {
  font-size: 1.5rem;
  margin-top: 100px;
  margin-bottom: 50px;
}

.picturebook p {
  margin-bottom: 20px;
}

.sitemap09 {

  margin-top: 150px;
}


header {
  margin-bottom: 160px;
}


/* チェックボックスのグループ全体のスタイル */
.checkbox-group {
  background: rgba(255, 255, 255, 0.8);
  /* 半透明の白背景で文字を浮かせる */
  padding: 15px;
  border-radius: 8px;
  display: inline-block;
}

/* ラベル（文字部分）のスタイル */
.checkbox-group label {
  cursor: pointer;
  display: inline-block;
  padding: 5px 0;
  font-family: sans-serif;
  color: #333;
  transition: color 0.3s;
}

/* マウスを乗せた時に色を変える */
.checkbox-group label:hover {
  color: #007bff;
}


/* テーブル全体の境界線を整理 */
#form01 table {
  width: 100%;
  border-collapse: collapse;
  /* 境界線を重ねてスッキリさせる */
}

/* 行間（上下の余白）を広くする */
#form01 th,
#form01 td {
  padding: 20px 10px;
  /* 上下に20px、左右に10pxの余白 */
  border-bottom: 1px solid #ddd;
  /* <hr>の代わりに下線を引く */
  text-align: left;
  vertical-align: middle;
}

/* 最後の行の線は消す */
#form01 tr:last-child th,
#form01 tr:last-child td {
  border-bottom: none;
}

/* 見出し（th）の幅を調整して整える */
#form01 th {
  width: 30%;
  background-color: rgba(255, 255, 255, 0.1);
  /* 背景動画がある場合を想定 */
}



/* セクション全体の調整 */
.companymain {
  max-width: 900px;
  margin: 50px auto;
  padding: 40px;
  background: rgba(255, 255, 255, 0.85);
  /* 半透明の白背景 */
  backdrop-filter: blur(10px);
  /* 背後をぼかすとお洒落 */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  color: #333;
}

.companymain h2 {
  text-align: center;
  font-size: 2rem;
  margin: bottom 2px;
}

.sns-links {
  text-align: center;
  padding: 20px 0;
}

.sns-links a {
  margin: 0 15px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.sns-links a:hover {
  transform: translateY(-5px);
  /* マウスホバーで少し上に動く */
}

.sns-links img {
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
  /* 軽い影をつけて見やすくする */
}

















/* めでぃあくえり */
@media screen and (max-width:440px) {
  .wrapper {
    width: 100%;
  }

  nav, nav02, nav03 .global {
    display: none;
  }

  .contactmain h2 {
    margin-top: 10px;
  }

  #kv iframe {
    width: calc(100%);
    max-width: 440px;
    height: auto;
    margin-top: 60px;
    z-index: 30;
    /* margin-right: auto;
margin-left: auto; */
  }

  .movie p {
    font-size: 80%;
  }

  .fix_box {
    width: 100%;
    height: 60px;
    background-color: rgb(0, 0, 2);
    position: fixed;
    top: 0;
    right: 0;
  }

  /* .fix_box02{
width: 100%;
height: 60px;
background-color: rgb(0, 0, 2);
position: fixed;
bottom: 0;
right: 0;
}  */


  div.hamburger {
    width: 100%;
    height: 50px;
    display: block;
    border: 1px solid #f6f2f2;
    z-index: 99;
  }


  .visual {
    display: none;
  }

  #books.inochitakara {
    background-color: #f6f2f2;
  }

  .picturemov {
    width: 100%;
    width: auto;
    display: block;
  }

  .zuimov {
    width: 100%;
    margin: 0 auto;
  }

  .zuisen03 {
    width: 100%;
  }

  .zuisen03 p {
    margin-bottom: 10px;
  }

  .slider {
    display: block;
  }

  .pic img {
    width: 100%;
  }

  .profile {
    margin: 0 auto;
    padding: 10px;
  }

  .news {
    width: 100%;
    height: auto;
  }

  .news div.info {
    width: 70%;
  }

  div.libbox {
    display: block;
  }

  .events {
    margin: 0 auto;
    padding: 5px;
  }

  .events {
    margin: 0 auto;
    padding: 5px;
  }

  form {
    margin-top: 50px;
    line-height: 2rem;
  }

  textarea {
    margin-bottom: 20px;
  }



  .movie img:last-child {
    position: absolute;
    bottom: 30px;
    width: 30%;
    height: 100px;
    right: 0;
  }

  /* mediaライブラリーページング */

  #liblery .wrapper {
    width: 100%;
  }

  #liblery .inochitakara {
    background-image: url(../images/title.png);
  }

  #liblery .inochitakara h2 {
    margin-top: 20px;
    margin-left: 20px;
  }

  #liblery .boxwrap {
    flex-wrap: nowrap;
    display: block;
    text-align: left;
    margin-left: 55px;
  }

  #liblery .wrapper {
    width: 100%;
  }

  /* contact */
  #contact .wrapper {
    width: 90%ß;
  }

  #contact .treecon p {
    margin: 5px;
  }

  #contact .treecon img {
    margin: 50px 5px 5px 5px;
  }

  #contact .treecon {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  #contact .contactmain {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  #contact .reading {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  #contact textarea {
    width: 200px;
    height: 80px;
  }

  /* contact */

  #contact01 {
    color: #fff;
  }

  #form01 {
    color: #fff;
  }

  .pos-title {
    top: 3%;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 3rem;
    color: #f6f2f2;
  }

  .pos-description {
    top: 30%;
    font-size: 0.9rem;
  }

  .pos-list {
    bottom: 3%;
    right: 15%;
    font-size: 0.8rem;
    color: #fff;
    line-height: 1.2rem;
  }

  .pos-list li {
    padding: 2px;
    position: static;
    width: 100%;
    /* margin-bottom: 5px; */
    background-color: rgb(254 254 254 / 21%);
    /* left: 50%; */
  }

  .dramadetail {
    font-family: serif;
    width: 90%;
    background-image: url(../images/shinigamibg02.JPG);
    color: #f6f2f2;
    margin: 0 auto;
    padding: 5%;
    border-radius: 20px;
  }

  .demonsgame p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    color: bisque;
    border-top: 6px solid red;
    border-bottom: 6px solid red;
    width: 90%;
  }

  .movlib p {
    font-size: 1rem;
  }

  button p {
    font-size: 1rem;
  }

  .sponsord h5 {
    font-size: 2rem;
    color: blue;
    font-weight: 600;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }

  .sup p {
    font-size: 1.2rem;
  }

  small {
    color: #fff;
  }

  /* 書籍概要 ここまで　*/

  /* events */

  .eventslib {
    color: #fff;
  }

  .eventslib h3 {
    font-size: 2rem;
  }

  .eventslib p {
    font-size: 1.3rem;
  }

  header {
    height: 200px;
  }

  .picturebook {
    color: blue;
  }

  .content {
    color: red;
    font-weight: 600;
  }

  button {
    border: 1px solid red;
    border-radius: 5px;
  }

  .keyv iframe {
    height: 600px;

  }

  dd {
    margin-left: 10px;
    text-align: start;
  }

  .drama02 {
    color: #ff0000;
  }

  header h1 {
    margin-top: 40px;
    font-size: 2rem;
    font-style: italic;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }


  header h1 {
    margin-bottom: 10px;
  }



  .demonsgame h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    color: bisque;
  }

  .linkbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;


  }



}