/* kirincou2024
   SP
***************************************************  */

@media screen and (max-width: 1024px) {  /* ◆スクリーンサイズが1024px以下の場合に適用 */
/* --------------------------------------------------------
** レスポンシブ設定
** -------------------------------------------------------- */
	.sp1_off {
		display: none;
	}

	.sp1_on {
		display: contents;
	}






/* --------------------------------------------------------
** ヘッダー（グローバルメニュー／ハンバーガー）
** -------------------------------------------------------- */
	.header-box {
		width: 96%;
	}

	.header-box ul {
		display: block;
	}

	.header-box li a {
		font-size: 1.8rem;
	}



	/* チェックボックスは非表示に */
	.drawer-hidden {
		display: none;
	}

	/* ハンバーガーアイコンの設置スペース */
	.drawer-open {
		display: flex;
		height: 60px;
		width: 60px;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 100;		/* 重なり順を一番上に */
		cursor: pointer;
	}

	/* ハンバーガーメニューのアイコン */
	.drawer-open span,
	.drawer-open span:before,
	.drawer-open span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #333;
		transition: 0.5s;
		position: absolute;
	}

	/* 三本線のうち一番上の棒の位置調整 */
	.drawer-open span:before {
		bottom: 8px;
	}

	/* 三本線のうち一番下の棒の位置調整 */
	.drawer-open span:after {
		top: 8px;
	}

	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer-check:checked ~ .drawer-open span {
		background: rgba(255, 255, 255, 0);
	}

	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer-check:checked ~ .drawer-open span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#drawer-check:checked ~ .drawer-open span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* メニューのデザイン*/
	.drawer-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*		メニューを画面の外に飛ばす */
		z-index: 99;
		background: #fff;
		transition: .5s;
	}

	/* アイコンがクリックされたらメニューを表示 */
	#drawer-check:checked ~ .drawer-content {
		left: 0;/* メニューを画面に入れる */
	}

	/* 個別に新規追加 */
	.drawer-item {
		margin: 1rem 0;
	}
	.ham-title {
		margin-left: 1rem;
		letter-spacing: 0.04rem;
	}

}



@media screen and (max-width: 599px) {  /* ◆スクリーンサイズが599px以下の場合に適用 */
/* --------------------------------------------------------
** レスポンシブ設定
** -------------------------------------------------------- */
	.sp2_off {
		display: none;
	}

	.sp2_on {
		display: contents;
	}


/* --------------------------------------------------------
** パララックス⇒イラスト画像差替え
** -------------------------------------------------------- */
	.parallax-bg {
		display: none;
	}

	.mov-vbg {
		display: block;
	}

	.mov-vbg img {
		width: 100%;
	}

	.mainv-s {
		padding-top: 116px;
	}






/* -------------------------------------------------------------------
** news
** ------------------------------------------------------------------- */
		.news-box-mob ul {
			margin-bottom: 0.8rem;
		}


}