@charset "utf-8";
/* リセットCSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{scroll-behavior:smooth}

body {
/*font-family: 'Noto Sans JP', Arial, sans-serif;*/
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-weight: 500;
/*background-color: #1f1f1f;*/
font-size: 16px;
line-height: 1.9em;
}

/* 外側は常に黒 */
html, body { background:#1f1f1f; }

/* メインコンテナ：内側は透過、枠だけ金グラデ（ビューポート固定） */
.main-container{
max-width:1200px;/* 最大横幅 */
/*width: 90%;*/ /* レスポンシブ対応 */
margin:0 auto;
/*border: 5px solid #FFD700;*/ /* 金色の枠  */
/*padding: 5px;*/
/*background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);*/

border:5px solid transparent;   /* 枠の太さ */

/* 金色グラデの定義 */
--gold1:#B67B03; --gold2:#DAAF08; --gold3:#FEE9A0;

/* 2レイヤー背景：
   1) 透明（内側） … padding-box に適用
   2) 金グラデ      … border-box に適用（固定表示）
*/
background-image:
  linear-gradient(transparent, transparent),
  linear-gradient(45deg, var(--gold1) 0%, var(--gold2) 45%, var(--gold3) 70%, var(--gold2) 85%, var(--gold1) 100%);
background-origin: padding-box, border-box;
background-clip:   padding-box, border-box;

/* 通常ブラウザでは2枚目を“fixed”に */
background-attachment: local, fixed;

/* ビューポート全面に敷く（固定グラデ用） */
background-size: auto, 100vw 100vh;
/* 後述のiOS補正でY位置を微調整できるよう変数を用意 */
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
}

/* ---- iOS Safari のフォールバック（fixedが無効になるためJSで補正） ---- */
@supports (-webkit-touch-callout: none) {
.main-container{
/* fixedが効かないので scroll に切り替え */
background-attachment: local, scroll;
/* JSで var(--gold-fixed-y) を更新して“固定風”に見せる */
background-position: center center, center var(--gold-fixed-y, 0px);
background-size: auto, 100vw 100vh;
/* 下のカラー */
background-color: #B67B03;
}
}

/* ヒーローセクション */
.hero {
width: 100%;
/*height: 100vh;*/ /* ビューポートの高さに合わせる */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* ヒーローコンテナ */
.hero-container {
position: relative;
/*max-width: 1200px*/; /* 最大横幅 */
width: 100%;
aspect-ratio: 1500 / 800; /* 幅1500px:高さ600pxの比率を維持 */
/*aspect-ratio: 1500 / 600;*/
max-height: 100vh; /* ビューポートの高さを超えない */
}

.hero-container-detail {
position: relative;
/*max-width: 1200px*/; /* 最大横幅 */
width: 100%;
aspect-ratio: 1500 / 350; /* 幅1500px:高さ600pxの比率を維持 */
max-height: 100vh; /* ビューポートの高さを超えない */
}

/* メイン画像 */
.hero-image {
width: 100%;
height: 100%;
object-fit: contain; /* 画像全体を表示 */
object-position: center; /* 画像を中央に配置 */
display: block;
animation: glowFade 1.5s ease-out; /* 背景の光るアニメーション */
}

.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;      /* 画面いっぱいにトリミング表示 */
object-position: center;
z-index: 0;
pointer-events: none;   /* クリックをブロックしない */
}


/* 初期状態：非表示＆わずかに下げてぼかす */
.catchphrase,.logo-image_top,.deco-image{
opacity: 0;
}

/* ロゴ */
.logo {
position: absolute;
top: 20px;
left: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
/*animation: fadeIn 1s ease-in;*/
}

/* キャッチコピー */
.hero.is-playing .catchphrase{
opacity: 1;
color: #fff; /* 白色（背景画像に応じて変更可） */
font-size: 1rem; /* フォントサイズ */
font-weight: normal;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 読みやすさのための影 */
margin-bottom: 10px; /* ロゴとの間隔 */
animation: fadeIn 1s ease-in; /* フェードインアニメーション */
	
/*下の「h1」に影響されないように*/
margin-top: 0px;
}

/* ロゴ画像 */
.hero.is-playing .logo-image_top,.logo-image{
opacity: 1;
max-width: 280px; /* ロゴのサイズ調整 */
height: auto;
display: block;
animation: fadeIn 1s ease-in; /* フェードインアニメーション */
}


/* 装飾画像（恐竜の爪痕） */
.hero.is-playing .deco-image{
opacity: 1;
max-width: 400px; /* 装飾画像のサイズ調整（必要に応じて変更） */
height: auto;
display: block;
/*margin-top: 10px;*/ /* ロゴとの間隔 */
margin-left: 50px;
animation: glowShrink 0.25s ease-out; /* 光って縮小するアニメーション */
/*animation-delay: 1.5s;*/
animation-delay: 3.5s;
animation-fill-mode: backwards; /* アニメーション開始前は非表示 */
}


/* レスポンシブ対応 */
/*@media (max-width: 1200px) {
.hero-container {
/*width: 90%;*/ /* 画面幅が1200px以下の場合は余白を設ける 
}
}*/

@media (max-width: 768px) { /* タブレット */
.hero.is-playing .logo-image_top,.logo-image{
max-width: 215px;
}
.hero.is-playing .catchphrase {
font-size: 0.9rem;
line-height: 1em;
}
.hero.is-playing .deco-image {
max-width: 255px;
margin-left: 30px;
}
}

@media (max-width: 480px) {/* モバイル */
.hero.is-playing .logo-image_top,.logo-image{
max-width: 150px; 
}
.hero.is-playing .catchphrase {
font-size: 0.8rem;
line-height: 1em;
}
.hero.is-playing .deco-image {
max-width: 110px;
margin-left: 30px;
}
}


/* 新着情報セクション */
.news {
background-color: #f9f4e5; /* 背景色 */
width: 100%;
padding: 10px 0px 20px 0px; /* 上下の余白 */
/*	border-color: #1f1f1f;
border-style: solid;
border-left-width: 10px;
border-bottom-width: 10px;
border-right-width: 10px;*/
}

/* 新着情報コンテナ */
.news-container {
max-width: 1200px; /* ヘッダーと幅を揃える */
width: 90%;
margin: 0 auto; /* 中央揃え */
}

/* 新着情報タイトル */
.news-title {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 20px;
color: #333; /* テキスト色 */
}

/* 新着情報リスト */
.news-list {
list-style: none;
font-size: 1rem;
color: #333;
}

.news-list li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}

.news-list li::before {
content: "•";
position: absolute;
left: 0;
color: #333;
}

.news-list li::before {
content: "🦖"; /* 恐竜絵文字 */
color: #FFD700;
}


a {
/*background-color: transparent;*/
/*text-decoration: underline;*/
/*color: inherit;*/
/*margin-top: 20px;
margin-bottom: 20px;*/
}


/* 詳細ページセクション（detail.php用） */
.detail {
background-color: #f9f4e5; /* 新着情報と同じ背景色 */
width: 100%;
padding: 20px 0; /* 上下の余白 */
}

/* 詳細ページコンテナ */
.detail-container {
max-width: 1200px; /* 最大横幅 */
width: 90%; /* レスポンシブ対応 */
margin: 0 auto; /* 中央揃え */
}

/* 詳細ページタイトル */
.detail-title {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 20px;
color: #333;
}

/* 詳細ページ画像 */
.detail-image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
display: block;
}

/* 詳細ページコンテンツ */
.detail-content {
font-size: 1rem;
color: #333;
/*line-height: 1.6;*/
line-height: 1.75em;
margin-bottom: 20px;
}

/* 戻るリンク */
.back-link {
display: inline-block;
padding: 10px 20px;
background: #FFD700; /* 金色のボタン */
color: #333;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
}

.back-link:hover {
background: #FFFF99; /* ホバー時に明るい金色 */
}

/* アニメーション */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes glowFade {
/*
from {
opacity: 0;
filter: brightness(1.5); /* 明るく光る */
/*box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);*/ /* 背景全体に軽い輝き
}
to {
opacity: 1;
filter: brightness(1); /* 通常の明るさに */
/*box-shadow: 0 0 0 rgba(255, 255, 255, 0); *//* 影を消す 
}*/

0% { opacity: 0; filter: brightness(1.5); transform: scale(1.1); }
100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}

@keyframes glowShrink {
from {
opacity: 0;
transform: scale(3); /* 1.5倍の大きさで開始 */
filter: brightness(5); /* 明るく光るエフェクト */
/*box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);*/ /* 光る影 */
}
to {
opacity: 1;
transform: scale(1); /* 元のサイズに戻る */
filter: brightness(1); /* 通常の明るさに */
/*box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); *//* 控えめな影 */
}
}


/* 恐竜色占いボタン */
.dino-button {
display: inline-block;
padding: 10px 20px;
background: #FFD700;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}

.dino-button::before {
content: "🦖"; /* 恐竜絵文字 */
margin-right: 5px;
}

.dino-button:hover {
background: #FFFF99;
}


/* パンくずリスト */
.breadcrumb {
max-width: 1200px; /* メインコンテナと揃える */
width: 90%; /* レスポンシブ対応 */
margin: 10px auto;
font-size: 1rem;
color: #000;
}

.breadcrumb ul {
list-style: none;
display: flex;
align-items: center;
padding: 0;
}

.breadcrumb li {
margin-right: 5px;
}

.breadcrumb li:first-child::before {
content: "🦖";
margin-right: 5px;
}

.breadcrumb li:not(:last-child)::after {
content: ">";
margin-left: 5px;
color: #333;
}

.breadcrumb a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}

.breadcrumb a:hover {
color: #2e8b57;
}

.breadcrumb span {
color: #333; /* 現在のページはリンクでない */
}


/* オリジナル */

h1{
font-size: 1.5rem;
margin-top: 10px;
margin-bottom: 10px;
color: #2e8b57;
font-weight: bold;
}

h2{
font-size: 1.2rem;
margin-top: 10px;
margin-bottom: 10px;
color: #2e8b57;
font-weight: bold;
}

h3{
font-size: 1rem;
margin-top: 10px;
margin-bottom: 10px;
color: #2e8b57;
font-weight: bold;
}

.heading {
position: relative;
padding: .3em 0 .2em 1em;
border-bottom: 3px solid #2e8b57;
color: #333333;
}

.heading::before {
position: absolute;
top: 0;
left: .3em;
transform: rotate(55deg);
height: 11px;
width: 12px;
background: #2e8b57;
content: '';
}

.heading::after {
position: absolute;
transform: rotate(15deg);
top: .6em;
left: 0;
height: 8px;
width: 8px;
background: #2e8b57;
content: '';
}

p{
font-size: 1rem;
/*font-size: 1.2rem;*/
margin-top: 15px;
margin-bottom: 15px;
}

.red_txt{font-weight:bold;color:#EB0000;}
ruby { font-size: 1.2rem; color: #333; }
rt { font-size: 0.6rem; color: #666; }

.img-responsive{
/*width:100%;*/
max-width: 100%;
height: auto;
border: 1px solid #D1CFCF;
}

.btn-icon {
text-decoration: none;
display: inline-block;
padding: .5em 1em;
border: none;
border-radius: 5px;
background-color: #c30d23;
color: #fff;
font-weight: 600;
font-size: 0.8em;
}

.btn-icon::after,.global_link-icon::after {
display: inline-block;
vertical-align: middle;
width: 1.25em;
height: 1.25em;
margin-left: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
content: '';
}

.btn-icon:hover {
background-color: #e60021;
}

.recommend {
/*margin: 0 auto;*/
margin: 30px 5px 30px 5px;
border: 2px solid #2e8b57;
border-radius: 5px;
color: #333333;
}

.recommend div {
display: inline-flex;
align-items: center;
column-gap: 4px;
position: relative;
top: -13px;
left: 10px;
margin: 0 7px;
padding: 0 8px;
background: #f9f4e5;
color: #2e8b57;
font-weight: 600;
vertical-align: top;
}

.recommend div::before {
width: 15px;
height: 7.5px;
border-bottom: 3px solid #2e8b57;
border-left: 3px solid #2e8b57;
transform: rotate(-45deg) translate(2px, -2px);
content: '';
}

.recommend p {
margin: 0;
padding: 0 1.5em 1em;
}

#footer-txt{
text-align: center;
color: #eee;
font-size: 0.8rem;
padding-top: 15px;
padding-bottom: 15px;
}

footer{
margin-top: auto;
}