/* 明朝体フォントを基本に設定し、文字間を調整 */
body {
	font-family: 'STIX Two Text', 'Lateef', serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0.05em; /* 文字間を広げる */
}
h2 {
	letter-spacing: 0.1em; /* h2の文字間を広げる */
}

/* 画像保存・選択の抑止 */
.unselectable {
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE/Edge */
	user-select: none; /* Standard */
}
/* QRコードとギャラリー画像以外はドラッグ防止 */
img:not(.qr-code):not(.gallery-item) {
	pointer-events: none;
}

/* 印刷時のキャプチャー対策 */
@media print {
	body * {
		display: none !important;
	}
	body::after {
		content: "このページの印刷は許可されていません。";
		display: block;
		text-align: center;
		font-size: 20px;
		margin-top: 50px;
		color: #000;
	}
}

/* News Background Image Styles */
.news-background-image {
    background-image: url('https://www.dino-graphica.com/image/foot-pt02.png');
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
    opacity: 0.9;
    transform: rotate(0deg);
    
    /* Mobile styles (default) */
    background-size: 470px auto; /* スマートフォン用の小さいサイズ */
}

/* Concept Background Image Styles */
.concept-background-image {
    background-image: url('https://www.dino-graphica.com/image/foot-pt01.png');
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-in-out;
    opacity: 0.25;
    transform: rotate(0deg);
    
    /* Mobile styles (default) */
    top: 200px;
	left:10px;
    background-size: 500px auto; /* スマートフォン用の小さいサイズ */
}

/* PC styles (md breakpoint: 768px以上) */
@media (min-width: 768px) {
    .concept-background-image {
		transform: rotate(0deg);
        top: 300px;
        background-size: 850px auto; /* PC用の大きいサイズ */
    }
}

/* スクロール時のフェードインアニメーション */
.fade-in-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 新しいコンバージョンボタン（CTAボタン） */
.cta-btn {
	background-color: #84afa6;
	outline: 1px solid #FFFFFF;
    outline-offset: -5px;
	/*background-image: linear-gradient(120deg, #c0398a 0%, #5c77c0 100%);*/
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px 0 rgba(92, 119, 192, 0.5);
	color: white;

}
.cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px 0 rgba(92, 119, 192, 0.6);
}

/* LINEボタン */
.line-btn {
	background-color: rgb(0, 184, 79);
	transition: all 0.3s ease;
	color: white;
}
.line-btn:hover {
	background-color: rgb(0, 160, 69);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px 0 rgba(0, 160, 69, 0.4);
}

/* Instagram風グラデーションボタン */
.instagram-btn {
	background-color: #84afa6;
	outline: 1px solid #FFFFFF;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px 0 rgba(92, 119, 192, 0.5);
	color: white;
	justify-content: center;
    outline-offset: -5px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px 0 rgba(92, 119, 192, 0.5);
	text-align: center;
	width: 300px;
}
.instagram-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px 0 rgba(92, 119, 192, 0.5);
}

/* ヘッダーナビゲーションのアクティブ状態 */
.nav-link.active {
	border-bottom: 2px solid #333;
	font-weight: bold;
}

/* ライトボックス（ギャラリー拡大表示）のスタイル */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.show {
	opacity: 1;
	visibility: visible;
}
.lightbox img {
	max-width: 90%;
	max-height: 80%;
	object-fit: contain;
	border-radius: 0px;
}
.lightbox .close-btn {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 3rem;
	color: white;
	cursor: pointer;
	line-height: 1;
}

/* Swiper.jsのナビゲーションボタンのスタイル */
.swiper-button-next, .swiper-button-prev {
	color: #333;
}
/* Swiper.js pagination color override */
.swiper-pagination-bullet {
    background: #999; /* 通常の点の色をグレーに設定 */
}
.swiper-pagination-bullet-active {
    background: #000; /* 現在表示されているスライドの点の色を黒に設定 */
}
.swiper-slide{
	width: 292px;
	height:292px;
}

/* Dino Walk Animation */
@keyframes walkAcrossScreen {
  0% {
    transform: translateX(-150px); /* 画面左の外側からスタート */
  }
  100% {
    transform: translateX(100vw); /* 画面右の外側へ移動 */
  }
}

#dino-animation-container {
  /* アニメーションを適用 */
  animation: walkAcrossScreen 30s linear infinite;
  position: absolute;
  bottom: 25%;
  width: 150px; /* 画像のサイズ */
  height: auto;
  z-index: 0;
  opacity: 0.7; /* 背景として馴染むように少し透明にする */
}

/* フェードイン・アウト用のスタイル */
#dino-animation-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* 1.5秒かけてフェード */
}

#dino-animation-container img.is-visible {
    opacity: 1;
}