:root {
	--main-color: #412F0B;
	--sub-color: #308900;
	--accent-color: #f8f8ff;
	--btn-color: #005700;
	--xl-margin: 120px;
	--l-margin: 80px;
	--o-margin: 64px;
	--m-margin: 40px;
	--s-margin: 24px;
	--xs-margin: 16px;
	--xl-text: 2.5rem;
	--l-text: 2rem;
	--o-text: 1.5rem;
	--m-text: 1rem;
	--s-text: .8rem;
}


html {
	height: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: "M PLUS 1p", sans-serif !important;
	font-weight: 500;
	font-style: normal;
	color: var(--accent-color) !important;
	background-color: var(--accent-color);
	overflow-x: hidden;
	animation: fade 1s linear 1;
	line-height: 2rem !important;
}

h2{
	color: var(--main-color) !important;
}

h3{
	color: var(--sub-color) !important;
}

h3.price{
	font-size: 120%;
	background: #D9D9D9;
	display: inline-block;
	padding: .5rem 2rem;
	border-radius: 2rem;
	font-weight: bold;
}

.btn-green {
	--bs-btn-color: #fff !important;
	--bs-btn-bg: var(--btn-color) !important;
	--bs-btn-border-color: #004000;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #157347;
	--bs-btn-hover-border-color: #004000;
	--bs-btn-focus-shadow-rgb: 60, 153, 110;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #146c43;
	--bs-btn-active-border-color: #13653f;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #004000;
	--bs-btn-disabled-border-color: #004000;
}

.btn{
	font-size: 110% !important;
}

strong.num{
	color: var(--accent-color);
	font-size: 200%;
	line-height: .3em;
	vertical-align: middle;
}

header .fv_pc{
	height: 100%;
}

section#highlight,section#price .wave-box-svg{
	background: #4B977D;
}

section#about,section#highlight .wave-box-svg{
	background: #AB9460;
}

section#price,section#access .wave-box-svg{
	background: #5784A6;
}

section#access,footer .wave-box-svg{
	background: #AE6033;
}

section#price,section#access,.copy{
	position: relative; 
}

section#price::before,section#price::after,section#access::before,section#access::after,.copy::before,.copy::after,.price_box::before,.price_box::after{
	content: '';
	display: block;
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	z-index: 9999;
}

section#price::before {
	top: 320px;
	left: 0;
	transform: translateY(-50%);
	width: 27%;
	height: 50%;
}

section#price::after {
	top: 111px;
	right: 0;
	transform: translateY(-50%);
	width: 15%;
	height: 15%;
}

section#access::before {
	bottom: 188px;
	left: 17px;
	transform: translateY(-50%);
	width: 20%;
	height: 53%;
}

section#access::after {
	top: 70px;
	right: 0;
	transform: translateY(-50%);
	width: 20%;
	height: 20%;
}

.copy::before {
	top: 0;
	left: 5px;
	transform: translateY(-50%);
	width: 100px;
	height: 55px;
}

.copy::after {
	top: 0;
	right: 0;
	transform: translateY(-50%);
	width: 90px;
	height: 166%;
	background-position: top right;
}

section#price::before{
	background-image: url(img/dino_1.png);
}

section#price::after{
	background-image: url(img/dino_2.png);
}

section#access::before{
	background-image: url(img/dino_4.png);
}

section#access::after{
	background-image: url(img/dino_3.png);
}

.copy::before{
	background-image: url(img/dino_6.png);
}

.copy::after{
	background-image: url(img/dino_5.png);
}

.price_box{
	z-index: 1
}

.price_box::before{
	background-image: url(img/dino_aflo.png);
	bottom: -300px;
	transform: translateY(-50%);
	width: 34%;
	height: 50%;
	left: 0;
}

.price_box::after{
	background-image: url(img/dino_pro.png);
	top: 33%;
	right: 0;
	transform: translateY(-50%);
	width: 37%;
	height: 30%;
}

footer{
	background: #5aa9b2;
	font-size: 90%;
}

footer .copy{
	background:var(--accent-color);
	color:var(--main-color);
	font-size: 90%;
}

img.frame{
	border: 5px solid #fff;
	box-shadow: 0px 0px 10px 0px rgba(136, 136, 136, 2);
}



.wave-box-svg {
	height: 98px;
	display: flex;
	position: relative;
	overflow: hidden;
}


.wave-svg-bottom {
	position: absolute;
	bottom: 0; /* ボックスの下端に配置 */
	left: 0;
	width: 100%;
	height: 80px; /* SVGの表示高さ */
	z-index: 2; /* コンテンツの上に重ねるか、背景にするか */
}
.m-plus-1p-medium {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* 画像の初期状態とアニメーションの定義 */
.fade-in-image-initial {
	opacity: 0; /* 最初は透明 */
	transition: opacity 2s ease-out; /* 2秒かけてゆっくりと不透明になる */
	/*
		transitionのプロパティ説明:
		- opacity: 変化させるプロパティ
		- 2s: 変化にかける時間 (2秒)
		- ease-out: 変化の速さ（最初は速く、徐々に遅くなる）
	*/
}

/* JavaScriptで追加するクラス */
.fade-in-image-initial.is-visible {
	opacity: 1; /* 不透明にして表示 */
}

/* アニメーションの初期状態と遷移の定義 (画像と共通) */
.fade-slide-in-initial {
	opacity: 0; /* 最初は完全に透明 */
	transform: translateY(-50px); /* 最初は上方向に50pxずらしておく */
	transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* 1.5秒かけて透明度と位置を変化 */
}

/* JavaScriptで追加されるクラス (画像と共通) */
.fade-slide-in-initial.is-visible {
	opacity: 1; /* 不透明にして表示 */
	transform: translateY(0); /* 元の位置に戻す */
}

header{
	position: relative;
}

.fv_sp .fv_read{
	position: absolute;
	top: 240px;
	width: 45%;
	right: 0;
}

.fv_sp .fv_aflo{
	position: absolute;
	bottom: 0;
	width: 77%;
	left: -32px;
}

.fv_sp .fv_pala{
	position: absolute;
	bottom: 20px;
	width: 50%;
	right: 0px;
}

.slider-container {
	width: 100%;
	overflow: hidden; /* コンテナからはみ出る部分を非表示 */
	white-space: nowrap; /* 画像が改行されないように */
	margin: 0 auto;
}

.slider-track {
	display: inline-block; /* 画像を横に並べる */
	animation: slide-left 40s linear infinite; /* アニメーション定義 */
	/*
		animationプロパティの説明:
		- slide-left: @keyframesで定義するアニメーション名
		- 30s: アニメーションの1周期にかかる時間 (30秒)
		- linear: 変化の速さ（一定の速さ）
		- infinite: アニメーションを無限に繰り返す
	*/
}

.slider-track img {
	height: 200px; /* 画像の高さを固定（調整可能） */
	width: auto; /* 高さに合わせて幅を自動調整 */
	margin-right: 15px; /* 画像間のスペース */
	object-fit: cover; /* 画像がコンテナに収まるように */
	vertical-align: middle; /* 画像のベースラインを揃える */
}

/* アニメーションの定義 */
@keyframes slide-left {
	from {
		transform: translateX(0); /* 開始位置 */
	}
	to {
		/*
		  スライドする距離は、slider-trackの全幅の半分にします。
		  これは、HTMLで同じ画像セットを2回繰り返しているためです。
		  これにより、アニメーションの切れ目がなくスムーズに見えます。
		*/
		transform: translateX(-50%);
	}
}

/*カルーセル*/

.carousel-container {
	position: relative;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	width: 100%;
	height: 100%; /* trackの高さもコンテナに合わせる */
	transition: transform 0.5s ease-in-out;
}

/* figure要素のスタイル */
.carousel-track figure {
	flex: 0 0 100%; /* 各figureをコンテナ幅に合わせ、縮小・拡大しない */
	width: 100%;
	height: 100%;
	margin: 0; /* デフォルトのマージンをリセット */
	display: flex; /* 画像とキャプションを縦に並べるためにflexboxを使用 */
	flex-direction: column; /* 要素を縦方向に配置 */
	justify-content: center; /* 必要に応じて中央寄せ */
	align-items: center; /* 必要に応じて中央寄せ */
	position: relative; /* キャプションの絶対配置の基準 */
}

.carousel-track figure img {
	width: 100%;
	height: calc(100% - 50px); /* 例: キャプションが50pxの高さを持つと仮定 */
	object-fit: cover;
}

/* figcaptionのスタイル */
.carousel-track figure figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: white;
	padding: 10px;
	font-size: .9em;
	box-sizing: border-box;
	text-shadow: 0 0 5px black;
}

/* ボタンのスタイルは変更なし */
.carousel-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 2em;
	cursor: pointer;
	z-index: 10;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}

.carousel-button:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

.carousel-button.prev {
	left: 10px;
}

.carousel-button.next {
	right: 10px;
}


.box_brown{
	border: 4px solid #412F0B;
	border-radius: 1rem;
	background: #fff;
	color: var(--main-color);
}

.box_brown .midokoro{
	width:40%;
}

.box_head{
	background: #C28A00;
	border-radius: .8rem .8rem 0 0;
	position: relative;
	padding-right: 40px;
	display: inline-block; 
}

.box_head::after{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		transform: translateY(-50%);
		width: 80%;
		height: 100px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top right;
		z-index: 9999;
}


.box_dino1::after{
	background-image: url(img/midokoro_01.png);
}

.box_dino2::after{
	background-image: url(img/midokoro_02.png);
}

.box_dino3::after{
	background-image: url(img/midokoro_03.png);
}

.spot{
	position: relative; 
	display: inline-block; 
}

.spot::after{
		content: '';
		display: block;
		position: absolute;
		bottom: -75px;
		right: -10px;
		transform: translateY(-50%);
		width: 50%;
		height: 50%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: bottom right;
		z-index: 9999;
}

.spot.rainbow::after{
	background-image: url(img/pl_rainbow.png);
}

.spot.daimyoujin::after{
	background-image: url(img/pl_daimyoujin.png);
}

.spot.kashima::after{
	background-image: url(img/pl_kashima.png);
}

.spot.tsuruana::after{
	background-image: url(img/pl_tsuruana.png);
}

.spot.nagame::after{
	background-image: url(img/pl_nagame.png);
}

.spot.tonboro::after{
	background-image: url(img/pl_tonboro.png);
}

.border_b{
	border-bottom:4px solid #412F0B;
}

.border_w{
	border-top: 3px solid #D9D9D9;
	border-bottom: 3px solid #D9D9D9;
}

small{
	font-size: 65% !important;
}

ul{
	list-style: none;
	padding-left: 0 !important;
}

/*youtube*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) { 
	
	.fv_read{
		position: absolute;
		top: 20%;
		width: 24%;
		right: 6%;
		object-fit: cover;
	}
	
	.fv_aflo{
		position: absolute;
		bottom: -31px;
		width: 41%;
		left: 10%;
		max-width: 100%;
		object-fit: cover;
	}
	
	.fv_pala{
		position: absolute;
		bottom: 40px;
		width: 38%;
		right: 4%;
		object-fit: cover;
	}
	
	.box_brown .midokoro{
		width:60%;
	}
	
	.box-head::after{
			width: 140%;
			height: 140%;
	}
	
	.box_head::after{
			width: 160%;
			height: 160%;
	}
	
	section#price::before{
			width: 200px;
			left: 10%;
			top: 250px;
	}
	
	section#price::after{
			top: 50px;
			width: 100px;
			right: 10%;
	}
	
	section#access::before{
			width: 126px;
			left: 10%;
	}
	
	section#access::after{
			top: 50px;
			width: 145px;
			right: 10%;
	}
	
	.copy::before{
			width: 200px;
			height: 100px;
			left: 20%;
	}
	
	.copy::after{
			top: 0px;
			width: 200px;
			height: 95px;
			right: 15%;
	}
	
	.price_box::before{
		background-image: url(img/dino_aflo.png);
		transform: translateY(-50%);
		width: 30%;
		height: 45%;
		left: 0;
		bottom: -212px;
	}
	
	.price_box::after{
		background-image: url(img/dino_pro.png);
		top: 20%;
		right: 0;
		transform: translateY(-50%);
		width: 30%;
		height: 30%;
		background-position: top right;
	}



}