/* Y'S GEAR : /mc/helmet/css/helmet.css */

/*======================================================================*
 *  [ Common ] 
 *======================================================================*/

html {
	scroll-behavior: smooth;
}

.contentsWidth {
	/* padding-right: 0 !important;
	padding-left: 0 !important; */
	/* contain: paint; */
	position: relative;
	font-size: 1.6rem;
	font-weight: 500;
}

.contentsWidth *,
.contentsWidth *::before,
.contentsWidth *::after { box-sizing: border-box; }
.contentsWidth a,
.contentsWidth a::before,
.contentsWidth a::after,
.contentsWidth a img { transition: all 0.3s ease; }

.contentsWidth h2,
.contentsWidth h3,
.contentsWidth h4,
.contentsWidth h5 { line-height: 1.2; }

@media screen and (min-width: 569px) {
	.contentsWidth .sp { display: none; }
} /* */

@media screen and (max-width: 568px) {
	.contentsWidth { font-size: 1.4rem; }
	.contentsWidth .pc { display: none; }
} /* */

/* [ セクション ]  */
.contentsWidth > section {
	margin-bottom: 80px;
}


/*======================================================================*
 *  [ 共通：ついてくるナビ ] 
 *======================================================================*/

.chemicalFloat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	position: fixed;
	top: 0;
	left: 50%;
	width: min(980px, 100%);
	border: 3px solid #000;
	background: rgba(255,255,255,0.9);
	font-weight: bold;
	line-height: 1;
	transform: translate(-50%, -100%);
	transition: all 0.3s ease; 
	z-index: 100;
}
.chemicalFloat.is-show {
	transform: translate(-50%, 0);
}

/* [ スマホ：ハンバーガーメニュー用 ] */
.chemicalFloat p,
.chemicalFloat input,
.chemicalFloat label {
	display: none;
}

/* [ ボタン ] */
.chemicalFloat nav {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	transition: all 0.3s ease; 
}
.chemicalFloat a {
	display: flex;
	align-items: center;
	color: #0066B7;
}
.chemicalFloat a:hover,
.chemicalFloat a:active {
	background: #0066B7;
	color: #fff !important;
}

/* [ やりたいこと ] */
.chemicalFloat.effect {
	font-size: 1.8rem;
}
.chemicalFloat.effect a {
	justify-content: center;
	width: 20%;
	height: 54px;
}

/* [ やりたいこと：ページ内リンク行先 ] */
.chemicalFloat.effect ~ .selectCat {
	scroll-margin-top: 80px;
}

/* [ やりたい場所 ] */
.chemicalFloat.place a {
	gap: 5px;
	padding: 0 5px 0 10px;
	width: 25%;
	height: 42px;
}
.chemicalFloat.place a b {
	flex-shrink: 0;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: #0066B7;
	color: #fff;
	font-size: calc(1em - 0.2rem);
	line-height: 1.4;
	text-align: center;
}

/* [ やりたい場所：ページ内リンク行先 ] */
.chemicalFloat.place ~ .selectCat {
	scroll-margin-top: 110px;
}

/* [ 動画で学ぶ ] */
.chemicalFloat.movie {
	font-size: 1.8rem;
}
.chemicalFloat.movie nav {
	justify-content: center;
}
.chemicalFloat.movie a {
	justify-content: center;
	width: 33.33%;
	height: 54px;
}

/* [ 動画で学ぶ：ページ内リンク行先 ] */
.chemicalFloat.movie ~ .movieCat,
.chemicalFloat.movie ~ .movieCat .movieDetail {
	scroll-margin-top: 80px;
}

@media screen and (max-width: 768px) {
	/* [ やりたいこと ] */
	.chemicalFloat.effect {
		font-size: 1.6rem;
	}

	/* [ やりたい場所 ] */
	.chemicalFloat.place {
		font-size: 1.4rem;
	}

	/* [ 動画で学ぶ ] */
	.chemicalFloat.movie {
		font-size: 1.6rem;
	}
} /* */

@media screen and (max-width: 568px) {
	/* [ スマホ：ハンバーガーメニュー用 ] */
	.chemicalFloat p {
		display: flex;
		align-items: center;
		height: 34px;
		padding: 0 10px;
	}
	.chemicalFloat label {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 44px;
		height: 34px;
		cursor: pointer;
	}
	.chemicalFloat label::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 3px;
		background: #000;
		transform: translate(-50%, -50%);
		content: "";
	}
	.chemicalFloat label b {
		position: relative;
		width: 18px;
		height: 18px;
	}
	.chemicalFloat label b::before, 
	.chemicalFloat label b::after {
		position: absolute;
		width: 100%;
		height: 3px;
		background: #000;
		transition: all 0.3s ease; 
		content: "";
	}
	.chemicalFloat label b::before {
		top: 0;
	} 
	.chemicalFloat label b::after {
		bottom: 0;
	}

	/* [ ボタン ] */
	.chemicalFloat nav {
		height: 0;
		overflow: hidden;
	}

	/* [ メニュー開いたとき ] */
	.chemicalFloat label:has(input:checked)::before {
		opacity: 0;
	}
	.chemicalFloat label:has(input:checked) b::before {
		top: calc(50% - 1.5px);
		transform: rotate(-45deg);
	} 
	.chemicalFloat label:has(input:checked) b::after {
		bottom: calc(50% - 1.5px);
		transform: rotate(45deg);
	}

	/* [ やりたいこと ] */
	.chemicalFloat.effect {
		font-size: 1.4rem;
	}
	.chemicalFloat.effect a {
		width: 33.33%;
		height: 34px;
	}
	.chemicalFloat.effect label:has(input:checked) ~ nav {
		height: 70px;
	}

	/* [ やりたいこと：ページ内リンク行先 ] */
	.chemicalFloat.effect ~ .selectCat {
		scroll-margin-top: 50px;
	}
	.chemicalFloat.effect:has(input:checked) ~ .selectCat {
		scroll-margin-top: 120px;
	}

	/* [ やりたい場所 ] */
	.chemicalFloat.place a {
		width: 50%;
		height: 30px;
	}
	.chemicalFloat.place label:has(input:checked) ~ nav {
		height: 120px;
	}

	/* [ やりたい場所：ページ内リンク行先 ] */
	.chemicalFloat.place ~ .selectCat {
		scroll-margin-top: 50px;
	}
	.chemicalFloat.place:has(input:checked) ~ .selectCat {
		scroll-margin-top: 170px;
	}

	/* [ 動画で学ぶ ] */
	.chemicalFloat.movie {
		font-size: 1.4rem;
	}
	.chemicalFloat.movie a {
		width: 33.33%;
		height: 34px;
	}
	.chemicalFloat.movie label:has(input:checked) ~ nav {
		height: 34px;
	}

	/* [ 動画で学ぶ：ページ内リンク行先 ] */
	.chemicalFloat.movie ~ .movieCat,
	.chemicalFloat.movie ~ .movieCat .movieDetail {
		scroll-margin-top: 80px;
	}
	.chemicalFloat.movie:has(input:checked) ~ .movieCat, 
	.chemicalFloat.movie:has(input:checked) ~ .movieCat .movieDetail {
		scroll-margin-top: 110px;
	}
} /* */


/*======================================================================*
 *  [ お役立ち情報 ] 
 *======================================================================*/

.helpfulInfo ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.helpfulInfo li {
	width: max(240px, calc(33.33% - 13.33px));
}
.helpfulInfo li a {
	display: block;
	border: 8px solid #E4F4FD;
}
.helpfulInfo li a:hover, 
.helpfulInfo li a:active {
	border-color: #0066B7 !important;
	transform: translateY(-5px);
}
.helpfulInfo li a:hover img, 
.helpfulInfo li a:active img {
	opacity: 1;
}

@media screen and (max-width: 568px) {
} /* */


/*======================================================================*
 *  [ お役立ち情報 ] 
 *======================================================================*/

.bunnerArea {
	margin-bottom: 80px;
	padding: 20px;
	background: #ddd;
}
.bunnerArea ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.bunnerArea li {
	width: max(240px, calc(33.33% - 13.33px));
}

/*======================================================================*
 *  [ トップへ戻る ] 
 *======================================================================*/

.returnTop {
	display: flex;
	justify-content: center;
	margin-bottom: 80px;
}

.returnTop a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 300px;
	height: 60px;
	border: 3px solid #F5F5F5;
	background-color: #fff;
	color: #333;
	font-size: 2rem;
}
.returnTop a:hover {
	border: 3px solid #F5F5F5!important;
}

.returnTop a::before {
	content: "";
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	border: 3px solid #CC1533;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(-135deg);
}

@media screen and (max-width: 768px) {
	.returnTop a {
		gap: 15px;
		width: 240px;
		font-size: 1.6rem;
	}
} /* */