@charset "UTF-8";
/* == 覚書 == */

/* == p { color: red } …htmlタグ全てに適応
/* == div { color: red }

/* == .クラス名 { color: red; } …クラス名に適応
/* == <p class="クラス名">文字色赤</p> == */

/* == 要素名.クラス名 { color: red; }　…クラス名が指定された要素名にのみ == */
/* == <要素名 class="クラス名">このテキストにスタイルが適用されます</p> == */

/* == div.クラス名 要素名 { color: red; } …クラス名が指定されたdiv内の要素名にのみ== */
/* == <div class="クラス名"> == */
/* == <要素名>このテキストにスタイルが適用されます</要素名> == */
/* == </div> == */

/* == #id名 { color: red; } …id名に適応。classより優先

/* == スペーシング {top|rifht|bottom|left|x t&b|y r&l} == */

/* ==================== ボディ ==================== */
BODY{
  background-color : #ffffcc;
}

/* ==================== テキスト ==================== */
/* == 濃い色テキスト == */
.tex-coffee {
  color: #cc9933;
}
/* == 注意色テキスト == */
.tex-caution {
  color: #cc3300;
}
/* == 流動テキスト == */
.tex-fluid  {

}

/* == 縦書きテキスト == */
.tex-vertical {
  writing-mode: vertical-rl;
  color: #996600;
  font-size: 0.9em;
  text-align: center;
  background-color: #ffdd99;
  border-radius:10px;
}

/* == リンクページサイトタイトル == */
.sitetitle {
  color: #cc9933;
  font-size: 1.8em;
  font-weight: bold;
}

/* ==================== リンク ==================== */
a{text-decoration:none;
  color:996600;
}
/* == オンマウス == */
a:hover {
 text-decoration:none;
 color: #cc3300;
 opacity: 0.9; 
}

/* ==================== ナビバー ==================== */
nav.navbar {
  background-color: #cc9933;
  height: 3.2rem;
  margin: 0;
  padding: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==================== パンくずリスト ==================== */
.breadcrumb {
  background-color: #ffdd99;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ==================== 見出し ==================== */
/* == color: rgba(0,0,0,0); a=透過率1で100% == */
/* == text-shadow: px px white; 水平/垂直/影色 == */
h1{/* == キャラ名(<h1 data-en="aaa"><span></span></h1>)== */
  padding-left: 1rem;
  position: relative; /* == 相対位置 == */
  padding-top: 20px;
  border-bottom: 2px solid #cc9933;
}

h1 span {
  position: relative;
  z-index: 2;
}

h1::before {
  content: attr(data-en);
  position: absolute;  /* == 絶対位置 == */
  top: 0px; /* == 上からの位置指定 == */
  left: 0; /* == 左からの位置指定 == */
  color: #ffdd99;
  font-size: 40px;
  text-transform: uppercase; /* == 大文字表記 == */
  z-index: 1;
}

h2{/* == カテゴリ最大 == */
 color: rgba(153,102,0,0.8);
 text-shadow: 2px 2px #ffdd99;
 border-bottom: 6px double #cc9933;  }

h3 {/* == カテゴリ中 旅パサブパ== */
  font-size: 1.5rem; 
  color: #003300;
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

h3:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #003300;
}

h3:before {
  left:0;
}
h3:after {
  right: 0;
}

h4{
  font-size: 1.2rem; 
  font-weight: bold;
}

h5 {/* == カテゴリ小(<h5><span></span></h5>) == */
  color: #003300;
  position: relative;
  padding: 0 20px;
}

h5:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #003300;
}

h5 span {
  position: relative;
  padding: 0 0.5em;
  background: #ffffcc;
}

h6{/* == カード内タイトル == */
  border-left: 10px solid #cc9933;
  padding-left: 0.5rem;  }

/* =============== 囲み枠付き見出し =============== */
.point-box {
  position: relative;
  border: 2px solid #996600; /* 枠の太さ・種類・色 */
  border-radius: 4px; /* 枠の丸み */
  margin: 0.5em 0.5em; /* 枠外の余白 */
  padding: 5px 0px 0px 0px;
}

.point-title {
  position: absolute;
  padding: 0 0.5em;
  left: 20px;
  top: -13px; /* タイトルの位置を調整 */
  color: #996600; /* タイトルの文字色 */
  font-weight: bold;
  font-size:0.9em; /* タイトルの文字サイズ */
  background-color: #ffffcc;
}

/* ==================== ボタン ==================== */
/* == 濃い色ボタン == */
.btn-coffee {
  background-color: #cc9933;
  color: #fff
}

.btn-coffee:hover,
a.btn-coffee:hover {
  color: #fff;
  background: #996600;
}

/* == うす色ボタン == */
.btn-tea {
  background-color: #ffdd99;
  color: #996600
}

.btn-tea:hover,
a.btn-tea:hover {
  color: #fff;
  background: #cc9933;
}

/* == ボタン共通 == */
a.btn {
  border: 1px solid #996600;
}

button.btn {
  border: 1px solid #996600;
}

/* ==================== バッジ ==================== */
.badge-top {
  color: #fff;
  background-color: #cc9933;
  margin-top: 1rem;
}

.badge-new {
  color: #fff;
  background-color: #cc3300;
}

.badge-go {
  background-color: #cc9933;
}
a.badge-go {
  color: #fff;
}
a.badge-go:hover {
  color: #cc3300;
}

/* ==================== コンテナ ==================== */
div.container-m {
  margin-top: 10px;/* == 親コンテナの上部に余白 == */
}

div.container-f { /* == フレックスコンテナ == */
  display: flex;
  flex-wrap: wrap;
}

/* ==================== テーブル ==================== */
.table td {
  vertical-align: middle;
}

.storytable td{
  vertical-align: top;
}

/* ============= フレックス(横並び) ============= */
.flex-contents {
  display: flex;
}

div.flex-contents{
  flex-direction: row;
}

/* ==================== イメージ ==================== */

/* == ジャンボトロン == */
.jumbotron {
  background-image: url(../img800-200.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

.jumbotron .bg-rgba {
  background-color: rgba(255, 255, 255, 0.7);
}

/* == オブジェクトフィット 詳細ページ用　== */
.img-icon {
  margin: 3px;
}
.img-icon img {
  width: 6rem;
  height: 6rem;
}

/* == オブジェクトフィット 一覧用　== */
.img-list {
  margin: 5px 3px;
}
.img-list img {
  width: 120px;
  height: 120px;
}

.img-list{
  position: relative;/*画像に重ねる*/
}
.img-list p{
  position: absolute;/*文字を重ねる*/
  top:2%;
  left: 5%;
  color: #fff;
  font-size: 1rem;
  background: #996600; /*文字背景色*/
  opacity: 0.8; /*文字背景透過*/
  padding: 1px;　/*文字周り余白*/
}

/* == オブジェクトフィット ラウンド　== */
.img-radius {
  margin: 3px;
}
.img-radius img {
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  border: 2px solid #996600;
}

/* == オブジェクトフィット　ストーリー == */
.img-story {
  margin: 2px;
}
.img-story img {
  width: 8rem;
  height: 5rem;
  border: 1px solid #996600;
}

.img-comic {
  margin: 0 0 1rem 0;
}
.img-comic img {
  border: 1px solid #996600;
}

/* == オブジェクトフィット共通 == */
.cover {
  object-fit: cover;
  object-position: 50% 10%
}

/* == 立ち絵背景画像 == */
div.container-bg {
  background-image: url(../pkg/detail/000background.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 100% auto;
}

/* ============= メディアオブジェクト ============= */

/* ==================== カード ==================== */
.card {
  padding: 5px;
  margin: 5px 0px 5px 0px;
}

.card-header{
  background-color: #ffdd99;
}

.card-body { 
  padding: 0px;
}

.card {
  transition: all 0.2s;
}

/* == リンク用カード == */
.card.linkcard { 
  font-size: 0.8rem;
  background-color: #fff;
}

.linkcard.card:hover {
  background-color: #cc9933;
  color: #fff;
}

/* == 色枠カード1 == */
.card.bordercard1 { 
  font-size: 0.9rem;
  background-color: #fff;
  border: 2px solid #99cc33;
}

.bordercard1.card:hover {
  background-color: #cc9933;
  color: #fff;
}

/* == 色枠カード1nホバー無し == */
.card.bordercard1n { 
  font-size: 0.9rem;
  background-color: #fff;
  border: 2px solid #99cc33;
}

/* == 色枠カード2 == */
.card.bordercard2 { 
  font-size: 0.9rem;
  background-color: #fff;
  border: 2px solid #99ccff;
}

.bordercard2.card:hover {
  background-color: #cc9933;
  color: #fff;
}

/* == 色枠カード2nホバー無し == */
.card.bordercard2n { 
  font-size: 0.9rem;
  background-color: #fff;
  border: 2px solid #99ccff;
}

/* ==================== モーダル ==================== */
.modal .modal-content {
  background-color: #fff;
  color: #996600;
  border-radius: 10px; /* == 角丸 == */
}

.modal .modal-col { /* == コンテンツの中央寄せ == */
  text-align:center;
}

.modal .modal-img {
  max-height: calc(100vh - 200px); /* == ブラウザの高さ100%-200px == */
}

.comiciframe {
  width: 100%;
  height: 700px;
}

/* ==================== フッター ==================== */
footer{
  background-color: #cc9933;
  bottom: 0;
  width: 100%;
  height: 1.6rem;
  text-align: center;
}

/* ==================== メディアクエリ ==================== */

/* == 大デバイス lg（デスクトップ, 1200px 未満）=========== */
@media screen and (max-width: 1199.98px) {

}

/* == 中デバイス md（タブレット, 992px 未満）============== */
@media screen and (max-width: 991.98px) {

/* == 立ち絵背景画像 == */
div.container-bg {
  background-image: url(../pkg/detail/000background.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: auto 60%;
  }
}

/* == 小デバイス sm（横向きモバイル, 768px 未満）========= */
@media screen and (max-width: 767.98px) {

/* ============= フレックス(横並び) ============= */
div.flex-contents{
  flex-direction: column;
}

/* == オブジェクトフィット 詳細ページ用　== */
.img-icon img {
  width: 5rem;
  height: 5rem;
  }

/* == 立ち絵背景画像 == */
div.container-bg {
  background-image: url(../pkg/detail/000background.png);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: auto 40%;
  }
}

/* == 小デバイス xs（縦向きモバイル, 576px 未満）========= */
@media screen and (max-width: 575.98px) {

/* == パンくずリスト == */
.breadcrumb {
  font-size: 0.7rem;
  padding: 0.3rem 0.8rem 0.3rem 0.8rem;
  }

/* == 流動テキスト == */
.tex-fluid  {
  font-size: 80%;
}

/* == 縦書きテキスト == */
.tex-vertical {
  font-size: 0.6em;
}

/* == 見出し == */
/* == H1 == */
h1{
  font-size: 2rem;
  padding-left: 0.5rem;
  padding-top: 10px;
}

h1 span {
  position: relative;
  z-index: 2;
}

h1::before {
  font-size: 30px;
}

/* == H2 == */
h2{
  font-size: 1.5rem;
}

/* == H3 == */
h3 {
  font-size: 1.2rem; 
  padding: 0 20px;
}

h3:before, h1:after {
  width: 15px;
}

/* == H5 == */
h5 {
  font-size: 1.1rem; 
  padding: 0 15px;
}

/* == テーブル テーブルデータ == */
.td-title {
  font-size: 0.8rem;
  }

/* == オブジェクトフィット 一覧用　== */
.img-list img {
  width: 70px;
  height: 70px;
  }
.img-list p{
  font-size: 0.6rem;
  }

/* == オブジェクトフィット ラウンド　== */
.img-radius img {
  width: 3.5rem;
  height: 3.5rem;
}

/* == 色枠カード1 == */
.card.bordercard1 { 
  font-size: 0.8rem;
}

/* == 色枠カード1nホバー無し == */
.card.bordercard1n { 
  font-size: 0.8rem;
}

/* == 色枠カード2 == */
.card.bordercard2 { 
  font-size: 0.8rem;
}

/* == 色枠カード2nホバー無し == */
.card.bordercard2n { 
  font-size: 0.8rem;
}

/* == モーダル　漫画用インフレーム　== */
.comiciframe {
  height: 480px;
}

}
/* ==  == */
/* ====================  ==================== */

html{
  scroll-behavior: smooth;
}