@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップへ戻るボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a.generate-back-to-top {
	width: 80px;
	height: 80px;
	line-height: 80px;
	right: 0;
	bottom: 0;
	border: 0;
	border-radius: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(2023-03-13mk)
↓↓↓下記をまずは削除した上で、【https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/】から、お好みのボタンのCSSを追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sp .my_hamburger {
	background: var(--main);
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background:transparent;
	cursor: pointer;
	width: 50px;
	height:50px;
	border-radius: 5px;
}

.openbtn::before {
	content: 'メニュー';
	position: absolute;
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	left: 50%;
	bottom: 8px;
	transform: translate3d(-50%, 0px, 0px);
}

.openbtn.active::before {
	opacity: 0;
}

.openbtn::after {
	content: '閉じる';
	position: absolute;
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	left: 50%;
	bottom: 8px;
	transform: translate3d(-50%, 0px, 0px);
	opacity: 0;
}

.openbtn.active::after {
	opacity: 1;
}

/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 15px;
	height: 1px;
	background: #fff;
	width: 40%;
}

.openbtn span:nth-of-type(1) {
	top:8px; 
}

.openbtn span:nth-of-type(2) {
	top:16px;
}

.openbtn span:nth-of-type(3) {
	top:24px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
	top: 12px;
	left: 15px;
	transform: translateY(6px) rotate(-45deg);
	width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
	top: 24px;
	left: 15px;
	transform: translateY(-6px) rotate(45deg);
	width: 40%;
}