@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み 
→ 2023/02/21 DLしてCSSフォルダに保管した。間違えて削除した時はDLして保存すること。
リセットCSSとは、
ブラウザがWebページを表示する際に使うスタイルを打ち消し、
ブラウザによる見え方の差をなくしてくれるのがリセットCSSです。
---------------------------------------------------------------------------*/
@import url("css/sanitize.css");
<!--@import url("https://unpkg.com/sanitize.css");-->



/*Font Awesomeの読み込みvideo-area
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Kaushan+Script&family=Qwitcher+Grypen:wght@700&display=swap');

/*Google Font 'Yuji Syuku' の読み込み(「人と自然を創造する-誰もが健康であるために」などに適用）
『趣のある和文向きの筆書体、アルファベット（文字間は少し広め）でも良い感じだと思う』
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');

/*Google Font 'Noto Serif JP' （Medium 500 ）の読み込み(本文などに適用）
明朝体風のフォント
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500&display=swap');

/*Google Font 'Noto Sans Japanese' （Bold 700）の読み込み(本文などに適用）
ゴシック体風のフォント
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

/*Google Font 'M PLUS Rounded 1c'
丸ゴシック系のフォント-------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");

*{
	box-sizing: border-box;/*--要素の幅と高さに「paddingとborderを含めるかどうか」border-boxにすると、含めるという指定--*/
}


/*固定動画の設定
---------------------------------------------------------------------------*/

/*-- 動画標示枠 --*/
#video-area {
    position: fixed; /*-- 動画を固定 --*/
	z-index: -1; /*-- 動画を背面に配置 --*/
	
	left: 50%;
	top: 10px;
	
    /*-- 各ブラウザー向けの transform --*/
    -webkit-transform: translate(-50%, -4.7%);
    -moz-transform: translate(-50%, -4.7%);
    transform: translate(-50%, -4.7%);
	
	width: 100%;
	max-width: 1500px;
	height: 107vh;
	overflow: hidden;
	/*--object-fit: contain;--*/

	
	/*--動画の中心部分を写す--*/
	display: flex;
    justify-content: center;
    align-items: center;

	/*border: solid 2px #000; /*表示範囲の確認用*/
}


#video {
    position: absolute;
    z-index: -1;
	min-height: 107vh; /* 1366×768px などの一部の画面で左右に余白ができないようにする　*/
	min-width: 100%;	/* 1366×768px などの一部の画面で左右に余白ができないようにする　*/
	/*border: solid 2px #175e43; /*表示範囲の確認用*/
}




/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 14px;	/*基準となるフォントサイズ。下の方にある「画面幅1000px以上」で基準を大きなサイズに再設定しています。*/
}

.list article {
	margin-bottom: 15px;
}

/*--使用せず--*/
article span{
	font-size: 11px;
}

.list figure{
	margin-left: 0;
}

.white{
	color:#fff  !important;
	text-shadow: 0 0 15px #0c0c0c;
}


/*------------------------------------------------
contents-kameoka-2 の 画像に適用
-------------------------------------------------*/
/*--画像を格納するコンテナを一定の大きさにして、はみ出した部分は非表示--*/
.zoom-out-container {
	overflow: hidden;
	width: 300px; /* 画像が表示される領域の幅を指定 */
	height: auto;
	/*border: 1px solid #ccc; /* ボーダーを追加 */
}

.zoom-out-image {
	width: 100%; /* 親要素に対して100%の幅を持つように指定 */
	height: 100%; /* 親要素に対して100%の高さを持つように指定 */
	object-fit: contain; /* アスペクト比を保ちながら親要素に収めるように指定 */
	transform-origin: center center;
	transform: scale(1.05) translateY(10px); /* translateYでY方向に移動、10pxは調整可能 */
	/* filter: blur(1000px); /* 初期のぼかしを設定 */
	transition: transform 0.8s, opacity 1s; /* 透明度の変更もアニメーションに追加 */
	opacity: 0; /* 初期の透明度を0に設定 */
}

.zoom-out-image.visible {
	transform: scale(1) translateY(0); /* 表示された時に元の位置に戻す */
	opacity: 1; /* 表示された時の透明度を1に設定 */
	/* filter: blur(0); /* アニメーション後のぼかしを解除 */
}



/*h2の設定 : 「じわっ」 と出る文字 ⇒　不採用
---------------------------------------------------------------------------*/
.blur {
	animation-name: blurAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes blurAnime {
	from {
		filter: blur(20px);
		transform: scale(1.02);
		opacity: 0;
	}

	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

.blurTrigger {
	opacity: 0;
}




/*contentsブロック設定（亀岡工場のページに適用）
---------------------------------------------------------------------------*/
.contents-kameoka-1 {
	position: relative;
	max-width: 1500px;	/*最大幅。これ以上広がらない。*/
	padding: 3px;
	margin: calc(100vh - 1px) 0 0 0; /*上は１画面の高さだけ空ける。*/
	
	background-image: url(../images/kameoka/map_bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	border: solid 1px #fff;	/*--背景にpng 画像を用いたとき、PCによっては背景画像の下に隙間ができることがあるため強いて白色を指定--*/
	background-color: #fff;	/*--背景にpng 画像を用いたとき、PCによっては背景画像の下に隙間ができることがあるため強いて白色を指定--*/

	/*border: solid 1px #ac0b56;*/
}


.contents-kameoka-1 >h1{
	font-family: 'Noto Serif JP', sans-serif;
	/*--要素の配置--*/
	position:absolute;
	/*--要素を天地中央寄せ--*/
	top: -65vh;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	/*--見た目の調整--*/
	color:#fff;
	text-shadow: 0 0 15px #666;

	text-align: center;
}


.contents-kameoka-1 a{
	color: #fff;
	text-decoration: solid;
}

/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	display: block;
	position: absolute;

	width: 0.1vw;
	height: 25vh;
	background-image: linear-gradient(
    	-180deg,
    	transparent,
   		rgb(238, 238, 238) 50%,
    	transparent 50%,
    	transparent
  	);
  	background-repeat: no-repeat;
  	background-size: 100% 200%;
  	animation-name: scroll-down;
  	animation-duration: 5s;
  	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /*--easeOutQuintのイージング--*/
  	animation-delay: 0.7s;
  	animation-iteration-count: infinite;
  	animation-fill-mode: backwards;
}

/*--縦方向に伸びる誘導線－表示位置--*/
.contents-kameoka-1 span{
	font-family: 'Noto Serif JP', sans-serif;
	/*--要素の配置--*/
	position:absolute;
	/*--要素を天地中央寄せ--*/
	top: -30vh;
	left: 95%;
	transform: translateY(-50%) translateX(-50%);
	/*--見た目の調整--*/
	color:#fff;
	text-shadow: 0 0 15px #666;

	text-align: center;
}

.scrollDown::after {
    content: "Scroll Down";
    display: inline-block;
    position: absolute;
    left: 13px; /*-- 調整が必要な場合は左の位置を調整してください --*/
    top: 40%;
    transform: translateY(-50%) rotate(90deg); /*-- 文字を回転して線と平行にする --*/
    transform-origin: left center; /*-- 回転の基準点を左端に設定 --*/
    color: rgb(238, 238, 238); /*-- 線と同じ色に設定 --*/
    font-size: 16px; /*-- 適切なフォントサイズに調整してください --*/
    white-space: nowrap; /*-- 文字が折り返されないように --*/
}

@keyframes scroll-down {
  0% {
    background-position: 0 100%;
  }

  50% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -100%;
  }
}

/*--listボックスを囲むボックス--*/
.kameoka-list-container {
	display: flex;					/*--flexボックスを使う指定--*/
	flex-wrap: wrap;				/*--折り返す指定--*/
	justify-content: space-between;	/*--並びかたの種類の指定--*/
	flex-direction: column;			/*--横幅の小さい画面で子要素を縦並びにする。ただしPCではこれを row にする--*/
	padding-left: 0;
	padding-bottom: 30px;
	/*border: 1px solid #bc0000;	   /*--枠線の幅、線種、色--*/
}

/*京阪神圏、遠方からもスムーズなアクセス　の部分のみに適用*/
.v-al{
	align-items: center;              /*--縦方向の中央寄せ--*/
}

/*--listボックス。１個あたりのボックスの指定です。--*/
.kameoka-list-container .list {
	display: flex;					/*--flexボックスを使う指定--*/
	flex-direction: column;			/*--子要素を縦並びにする--*/
	margin-top: 50px;
	margin-bottom: 20px;
	/*justify-content: space-between;	/*--並びかたの種類の指定--*/
	/*margin-bottom: 30px;			/*--ボックス同士の上下間の余白--*/
	/*border: 1px solid #bc0000;	   /*--枠線の幅、線種、色--*/
	padding: 0;					/*--ボックス内の余白--*/
	/*background: #fff;*/			   /*--背景色。--*/
	/*box-shadow: 2px 2px 5px rgba(0,0,0,0.1);*/	/*--ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。--*/
}

/*--生産拠点、亀岡工場のある－京都府亀岡市　これだけ幅を広くする。--*/
.wide {
	width: 100%!important;
}


.list h2{
	font-size: 30px;
}


.contents-kameoka-2 {
	max-width: 1500px;	/*--最大幅。これ以上広がらない。--*/
	margin: 0;
	background-color: #fff;
	position: relative; /*--左から右へ伸びる線を配置するために--*/
	/*border: 1px solid #bc0000;	   /*--枠線の幅、線種、色--*/
}



/*--左から右へ伸びる線（疑似要素で View More を表示）--*/
.more {
    display: block;
    position: absolute;

	bottom: 15%;
	left: 0;
	
    width: 10vw;
    height: 0.1vw;
    background-image: linear-gradient(
        90deg, /* 角度を変更 */
        transparent,
        rgb(59, 59, 59) 50%,
        transparent 50%,
        transparent
    );
    background-repeat: no-repeat;
    background-size: 200% 100%; /* background-size も変更 */
    animation-name: more;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.2s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

.more::after {
    content: "工場配置図";
    position: absolute;
    top: -15px; /* 調整が必要なら変更 */
    right: -100px;
    color: rgb(59, 59, 59); /* 線と同じ色 */
    padding-left: 5px; /* View More と線の間のスペース */
    cursor: pointer;
}

.more:hover::after,
#viewMore.hovered::after {
	color:#00245d  !important;
}

@keyframes more {
    0% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}



/*--------------------------------------------------------
contents-kameoka-3 の内部にある要素、横スクロールセクション 
----------------------------------------------------------*/

.contents-kameoka-3 {
	position: relative;
	max-width: 1500px;	/*--最大幅。これ以上広がらない。--*/
	margin: calc(70vh - 1px) 0 0; /*--上は少し高さだけ空ける。--*/
	text-align: center;
	padding-bottom: 0;
	/*-- グラデーションを指定。最初は透明で20vhほど下がると#00245dの100%色になる。--*/
	background: linear-gradient(to bottom, rgba(0, 36, 93, 0) 0%, rgba(49, 63, 110, 1) 30%, rgba(49, 63, 110, 1) 100%, rgba(49, 63, 110, 1) 100%);
		
	white-space: nowrap;	/*--要素内のテキストや子要素を自動で改行せず、横方向（水平方向）に連続して表示--*/
	overflow-x: hidden;
	/*--border: solid 1px #ac0b56;--*/
}

.contents-kameoka-3 h2{
	line-height: 10px;
}

.contents-kameoka-3 article{
	font-size: 18px;
}


/*--左から右へ伸びる線（疑似要素で View More を表示）--*/
.scrollRight-air {
    display: block;
    position: absolute;
	top: 75px;
	right: 150px;

    width: 10vw;
    height: 0.1vw;
    background-image: linear-gradient(
        90deg, /* 角度を変更 */
        transparent,
        rgb(238, 238, 238) 50%,
        transparent 50%,
        transparent
    );
    background-repeat: no-repeat;
    background-size: 200% 100%; /* background-size も変更 */
    animation-name: scroll-right;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.7s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

.scrollRight-air::after {
    content: "View More";
    position: absolute;
    top: -15px; /* 調整が必要なら変更 */
    right: -120px;
    color: rgb(238, 238, 238); /* 線と同じ色 */
    padding-left: 5px; /* View More と線の間のスペース */
    cursor: pointer;
}

.scrollRight-air:hover::after,
#viewMore.hovered::after {
	color:#e2a8a8  !important;
	text-shadow: 0 0 30px #0c0c0c;

}

@keyframes scroll-right {
    0% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}



.side-scroll {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*--リストを覆うラッパーを作成し、*/
.side-scroll-list-wrapper {
	position: relative;
	width: 100%;	/*--必ず親要素と同じ幅にする--*/
	height: 60vh;
	overflow-x: auto;
	white-space: nowrap; /* 子要素が横に連続して表示されるように設定 */
	overflow-y: hidden;		/*-- 縦方向のスクロールを非表示にする --*/
	/*border: solid 1px #0c8286*/
}

/*--リストそのものは position: absolute;にする--*/
.side-scroll-list {
	position: absolute;
	display: flex;
	left: 0;
	width: 120vw; /*-- 画像の合計幅に合わせた値を設定 --*/
	display: flex;
	/*border: solid 1px #ac0b56*/
}


.side-scroll-list-wrapper ul,
.side-scroll-list-wrapper li {
	list-style: none;
}

.side-scroll-list img {
	width: 40vw;	/*--画像サイズを調整--*/
}

.side-scroll-item + .side-scroll-item {
	margin-left: 2vw;
}

.side-scroll-item{
    display: flex;
    flex-direction: column;    /*-- 画像とテキストを縦方向に配置-- */
    align-items: center;    /*-- 中央揃え --*/
    margin-right: 20px;    /*-- 各リストの間隔を調整（必要に応じて変更） --*/
	
	color: #fff;
	font-size: 1.6vw;	/*--年代の文字サイズ、画面横幅に応じて変化--*/
}
/*--　横スクロールセクション  ここまで
---------------------------------------*/


.contents-kameoka-4 {
	max-width: 1500px;	/*--最大幅。これ以上広がらない。--*/
	
	padding: 7vh 2vh 2vh 3vh;	/*--左右の2vhはスマホなどのために設定--*/
	background-color: #fff;
	border: solid 1px #fff;
	text-align: center;
}

.contents-kameoka-4 article{
	margin-bottom: 15px;
}

.contents-kameoka-5 {
	max-width: 1500px;	/*-- 最大幅。これ以上広がらない。--*/
	margin-top: 0;
	padding: 10%;
	background-color: #fff;
	/*border: solid 1px #ac0b56;*/
}

.contents-kameoka-5 .kameoka-list-container .list {
    display: flex;
    flex-direction: column; /*-- 縦方向に要素を配置 --*/
    justify-content: center; /*-- 縦方向に中央揃え --*/
    align-items: center; /*-- 横方向に中央揃え --*/
    width: 30%;
	min-height: 20vw;
    max-width: 100%;
    background-color: #dfe6e5;
    text-align: center;
    padding: 30px;
    margin: 0 10px;
}

.contents-kameoka-5 .img-con{
	border-radius: 50%;	/*-- 画像を入れる要素を丸くする --*/
	overflow: hidden;	/*-- 画像の大きさが変わっても丸の大きさは変わらない --*/
}

.contents-kameoka-5 .kameoka-list-container .list {
	margin-bottom: 10px;
}

.contents-kameoka-5 .kameoka-list-container .list h3,
.contents-kameoka-5 .kameoka-list-container .list span {
    margin-bottom: 10px; /*-- テキストと画像の間に余白を追加 --*/
}

.contents-kameoka-5 .kameoka-list-container .list span {
    font-size:80%; /*-- テキストと画像の間に余白を追加 --*/
}

.contents-kameoka-5 .kameoka-list-container .list img {
    width: 150px;
    height: auto;
    object-fit: cover; /*-- 画像が円形になったときに切れないようにする --*/
	transition: transform 1s ease; /* ホバーエフェクトのアニメーションを追加します。 */
}
  
.contents-kameoka-5 .kameoka-list-container .list :hover img{
	transform: scale(1.1); /* ホバー時に画像を1.1倍に拡大します。 */
}

.contents-kameoka-6 {
    background-color: #b0c1e6;
    padding: 3vh 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	margin-bottom: 100vh;
}

.contents-kameoka-6 img {
    max-width: 100%;
    height: auto;
}



.blank{
	height: 75vh;
}


/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*--ボックス全体の設定--*/
#footermenu {
	background: none;	/*--背景色--*/
	color: #999;		/*--文字色--*/
    border-width: 1px 0; /*-- 上下のボーダーの幅を1pxに設定 --*/
    border-style: solid; /*-- ボーダーのスタイルをsolidに設定 --*/
    border-color: #fff transparent #fff transparent; /*-- 上下のボーダーを白色に、左右のボーダーを透明に設定 --*/
}

footer {
	background: none;	/*--背景色--*/
	color: #fff;		/*--文字色--*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px未満の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:600px) {

/*-- 動画標示枠 --*/
#video-area {
	left: 50%;
	top: 10%;
	-webkit-transform: translate(-50%, -10%);
    -moz-transform: translate(-50%, -10%);
	transform: translate(-50%, -10%);	/* 縦方向の標示位置を少し変更 */
}

/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	display: block;
	position: absolute;
	width: 0.4vw;
	height: 30vh;
}

.scrollDown::after {
    content: "Swipe";
}

/*--縦方向に伸びる誘導線－表示位置--*/
.contents-kameoka-1 span{
	top: -40vh;
	left: 92%;
	transform: translateY(-50%) translateX(-50%);
}

.contents-kameoka-1 >h1{
	font-size: 5vw;
	top: -65vh;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	/*--見た目の調整--*/
	color:#fff;
	text-shadow: 0 0 15px #666;

	text-align: center;
}

/*--スマホなど横幅の小さい画面では自動改行して、強制改行は無効にする--*/
article{
	white-space: normal; /* テキストを自動的に改行 */
}

article br {
	display: none;	/*--改行を無視--*/
}

.contents-kameoka-3 article{
	font-size: 16px;
}


.contents-kameoka-1 {
	background-image: none;
	background-color: #fff;
	padding-top: 3vh;	/*--文章と写真の間の広さ--*/
	padding-bottom: 2vh;	/*--文章と写真の間の広さ--*/
}

.contents-kameoka-2 {
	padding-top: 5vh;	/*--文章と写真の間の広さ--*/
}


.kameoka-list-container .list {
	margin-top: 0;
	margin-bottom: 0;
}


.list h2{
	font-size: 25px;
	line-height: 35px;
	padding: 8px;
	margin-bottom: 0px;
}

article{
	line-height: 25px;
	padding: 8px;
}

/*--スマートフォン向けの地図背景--*/
.sp-figure{
	background-image: url(../images/kameoka/sp_map_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	background-size: cover;

	width: 100vw;
	min-height: 50vh;
}


/*------------------------------------------------
contents-kameoka-2 の 画像に適用
画像を格納するコンテナを一定の大きさにして、はみ出した部分は非表示--*/


.zoom-out-container {
	width: 100vw; /* 画像が表示される領域の幅を指定 */
	height: auto;
}
/*-------------------------------------------------*/

/*---工場配置図の線---*/
.more {
	width: 35vw;
	height: 0.4vw;
	bottom: 10px;
	left: 40vw;
}

.more::after {
    content: "工場配置図";
    position: absolute;
    top: -12px; /* 調整が必要なら変更 */
    right: -80px;
	font-size: 0.8em; /* 文字の大きさを小さくする（必要に応じて調整） */
}



/*--なぜか、規則性をもって、nth-of-type(even) などが適用できない--*/
.contents-kameoka-2:nth-of-type(2) .kameoka-list-container .list:nth-of-type(1) {
    order: 2; /* 3番目の.contents-kameoka-2内の最初の.list要素を下に配置 */
}

.contents-kameoka-2:nth-of-type(2) .kameoka-list-container .list:nth-of-type(2) {
    order: 1; /* 3番目の.contents-kameoka-2内の2番目の.list要素を上に配置 */
}

.contents-kameoka-2:nth-of-type(6) .kameoka-list-container .list:nth-of-type(1) {
    order: 2; /* 5番目の.contents-kameoka-2内の最初の.list要素を下に配置 */
}

.contents-kameoka-2:nth-of-type(6) .kameoka-list-container .list:nth-of-type(2) {
    order: 1; /* 5番目の.contents-kameoka-2内の2番目の.list要素を上に配置 */
}

.contents-kameoka-2:nth-of-type(8) .kameoka-list-container .list:nth-of-type(1) {
    order: 2; /* 5番目の.contents-kameoka-2内の最初の.list要素を下に配置 */
}

.contents-kameoka-2:nth-of-type(8) .kameoka-list-container .list:nth-of-type(2) {
    order: 1; /* 5番目の.contents-kameoka-2内の2番目の.list要素を上に配置 */
}

.contents-kameoka-2:nth-of-type(10) .kameoka-list-container .list:nth-of-type(1) {
    order: 2; /* 5番目の.contents-kameoka-2内の最初の.list要素を下に配置 */
}

.contents-kameoka-2:nth-of-type(10) .kameoka-list-container .list:nth-of-type(2) {
    order: 1; /* 5番目の.contents-kameoka-2内の2番目の.list要素を上に配置 */
}




.contents-kameoka-3 {
	margin: calc(70vh - 1px) 0 0; /*--上に高さを空けて背景動画を見せる。--*/
	padding-bottom: 5vh;
	background: linear-gradient(to bottom, rgba(0, 36, 93, 0) 0%, rgba(49, 63, 110, 1) 30%, rgba(49, 63, 110, 1) 100%, rgba(49, 63, 110, 1) 100%);
	white-space: nowrap;
	text-align: center;
	height: auto;
}

.contents-kameoka-3 h2 {
	line-height: 1.2; /*-- 行間を調整 --*/
	font-size: 24px; /*-- フォントサイズを調整 --*/
}



.side-scroll-list-wrapper {
	position: relative;
	width: 100%;	/*--必ず親要素と同じ幅にする--*/
	height: 45vh; /*-- 高さを調整　年代を標示さえるには45vhは絶対必要 --*/
	overflow-x: auto;
	overflow-y: hidden;
	/*-- border: 1px solid #bc0000; --*/
}

.side-scroll-list {
	width: 400vw; /*-- 画像の合計幅に合わせた値を設定 --*/
}


.side-scroll-item + .side-scroll-item {
	margin-left: 2vw;
}


/*--横方向にスクロールする航空写真を直接囲む枠--*/
.side-scroll-item {
	display: flex;
	flex-direction: column;
	align-items: center;
    margin: 5px 0; /* 上下のマージンを減らす */
    padding: 10px; /* 必要に応じてパディングも調整 */
	color: #fff;
	font-size: 16px; /*-- テキストのフォントサイズを調整 --*/
}

/*--横方向にスクロールする航空写真--*/
.side-scroll-list img {
	width: 180vw !important; /*-- 画像サイズを調整 --*/
	height: auto; /*-- アスペクト比を維持 --*/
}



/*--左から右へ伸びる線（疑似要素で View More を表示）--*/
.scrollRight-air {
    display: block;
    position: absolute;
	top: 15%;
	right: 30%;

    width: 20vw;
    height: 0.2vw;
	z-index: 5;
}

.scrollRight-air::after {
    top: -15px; /* 調整が必要なら変更 */
    right: -100px;
    color: rgb(238, 238, 238); /* 線と同じ色 */
    padding-left: 0; /* View More と線の間のスペース */
    cursor: pointer;
}

.scrollRight::after {
    left: 12px; /*-- 調整が必要な場合は左の位置を調整してください --*/
    top: 48%;
}


.contents-kameoka-4 h3{
	max-width: 100%; /* テキストの最大幅を親要素の幅に合わせる */
	width: 100%; /* 必要に応じて親要素の幅に合わせる */
    font-size: 1em; /* ベースのフォントサイズを設定 */
}

.contents-kameoka-5 {
	padding: 15vw;
	height: auto;
	/*border: solid 1px #ac0b56;*/
}

/*--タイトル、文字、写真を囲む枠＝少し色付きの枠--*/
.contents-kameoka-5 .kameoka-list-container {
	height: auto;
}


/*--タイトル、文字、写真を囲む枠＝少し色付きの枠--*/
.contents-kameoka-5 .kameoka-list-container .list {
    width: 100%;
	height: auto;
    padding: 3vh;
    margin: 5vh 0;
}





/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

/*一覧ブロック（listタイプ）
---------------------------------------------------------------------------*/
/*--listボックスを囲むボック--*/
.kameoka-list-container {
	flex-direction: row;	/*子要素を横並びにする*/
}

/*--listボックス。１個あたりのボックスの指定です。--*/
.kameoka-list-container .list {
	width: 47%;	/*ボックスの幅*/
}

.sp-figure {
    background-image: none;
}



/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は縦向きのタブレット端末に適用したいスタイル
---------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/*-- 動画標示枠 --*/
#video-area {
	left: 50%;
	top: 0;	/* 縦方向の標示位置を少し変更 */

	-webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
	transform: translate(-50%, 0);	/* 縦方向の標示位置を少し変更 */
	/*--border: solid 1px #ac0b56;--*/
}

/*--縦方向に伸びる誘導線－後続するコンテンツへの誘導--*/
.scrollDown {
	display: block;
	position: absolute;

	width: 0.3vw;
	height: 30vh;
}

.scrollDown::after {
    content: "Swipe";
}

.side-scroll-list-wrapper {
	position: relative;
	width: 100%;	/*--必ず親要素と同じ幅にする--*/
	height: 45vh; /*-- 高さを調整　年代を標示さえるには45vhは絶対必要 --*/
	overflow-x: auto;
	overflow-y: hidden;
	/*--border: solid 1px #ac0b56;--*/
}

.side-scroll-list {
	width: 180vw; /*-- 画像の合計幅に合わせた値を設定 --*/
}

/*--横方向にスクロールする航空写真--*/
.side-scroll-list img {
	max-width: 200vw !important; /*-- 画像サイズを調整 --*/
	height: auto; /*-- アスペクト比を維持 --*/
}


/*--左から右へ伸びる線（疑似要素で View More を表示）--*/
.scrollRight-air {
    display: block;
    position: absolute;
	top: 9%;
	right: 15%;

    width: 20vw;
    height: 0.2vw;
	z-index: 5;
}

.scrollRight-air::after {
    top: -15px; /* 調整が必要なら変更 */
    right: -100px;
    color: rgb(238, 238, 238); /* 線と同じ色 */
    padding-left: 0; /* View More と線の間のスペース */
    cursor: pointer;
}

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}



	
/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

small
/*全体の設定
---------------------------------------------------------------------------1000以上*/
html, body {
	font-size: 16px;	/*基準となるフォントサイズの上書き*/
}
	

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}