/* BackMenu,DrawerMenu */

/*
html.is-fixed,
html.is-fixed body {
    overflow: hidden;
}
*/

/*ins {border:1px red solid;}*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.DrawerMenu { display: none; }

.back { display: none; }/* →common.jsの表示崩れ対策（３カラムと１カラム切り替えると消えて変な動きになる、理由よくわからない、たぶんfadeIn(0);との兼ね合い） */

.Menu-trigger, .drawer-trigger {
    cursor: pointer;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#any_buttons { display: none; }
#SHAREandTOP { display: none; position: relative;}

#ShareNavi, #PageTop { z-index: 996; }/* flexboxが999なので、隠すために998 */

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*
body.iphone #ShareNavi,
body.ipad #ShareNavi,
body.android #ShareNavi { display: none; }

body.iphone #PageTop,
body.ipad #PageTop,
body.android #PageTop { display: none; }
*/




/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( シェアボタントレイ )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
#Trigger, #PageTop, .PageTop-dummy {
	width: 60px;
	height: 60px;
}
#package li a {
	width: 47px;
	height: 47px;
}
#ShareNavi {
	right: 85px;
}
#PageTop {
	right: 15px;
}


#ShareNavi {
	display: flex;
	/*position: fixed;
	bottom: 25px; JS */
	flex-flow: nowrap;
	gap:0;
}


#ShareNavi a {
	transition: all .4s;
}
#Trigger {
	color: white;
	background: violet;
	border: 3px solid rgba(229, 76, 202, 1);
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}
	#Trigger p{
		line-height: 1;
	}
	#Trigger .Arrow-L:before, #Trigger .Arrow-R:before {
		line-height: 18px;
		display: block;
	}
	#Trigger p {/* SHARE */
	    font-size: 15px;
	}
	#Trigger .Arrow-L:before {/* << */
		content: "\0ab";
		font-size: 30px;
		color: white;
	}
	#Trigger .Arrow-R:before {/* >> */
		content: "\0bb";
	}

		#package {
		    display: none;
		}
		#package li {
		    list-style: none;
		    overflow: hidden;
		}

		#package li a {
			display: inline-block;
			color: #fdfdfd;
			text-decoration: none;
			border-radius: 50%;
			transition-timing-function: cubic-bezier (0.51, 0.1, 0.36, 1.68);
			box-shadow: 0 0.7rem 1.5rem -0.4rem rgba(0,0,0,0.15);
			border: 3px solid #fdfdfd;
			/* ちらつき対策 */
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			will-change: transform;/* https://postd.cc/css-will-change-property/ */
		}
				#package li a img {
					width: 100%;
					height: 100%;
					vertical-align: middle;
					-webkit-filter: grayscale(100%);
					-moz-filter: grayscale(100%);
					-ms-filter: grayscale(100%);
					-o-filter: grayscale(100%);
					filter: grayscale(100%);
				}
					#package li a:after {/* ホバー時の波紋 */
						content: "";
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 50%;
						transition: .4s ease-in-out;
						transform: scale(0, 0);
					}
							@keyframes FadeOut {
								  0% { opacity: 1; transform: scale(0, 0); }
								100% { opacity: 0; transform: scale(1.1, 1.1); }
							}

					#package li.Pocket a:after { background: rgba(239, 65, 84, 1); }
					#package li.Hatena a:after { background: rgba(0, 165, 215,1); }
					#package li.Instagram a:after { background: rgba(255, 165, 0, 1); }
					#package li.Facebook a:after { background: rgba(2, 123, 246, 1); }
					#package li.Twitter a:after { background: rgba(0, 0, 0, 1); }
					#package li.Line a:after { background: rgba(0, 185, 0, 1); }

					.BG {
						border: 3px solid rgba(229, 76, 202, 1);
						border-left: none;
						height: 100%;
						display: flex;
						align-items: center;
						gap: 8px;
						padding: 0 8px;
						transition: .5s ease-in-out .1s;
					}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( ページトップボタン )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	@keyframes VerticalMovement {
		  0% { transform: translate(-50%, -50%); }
		 25% { transform: translate(-50%, -40%); }
		 50% { transform: translate(-50%, -50%); }
		 75% { transform: translate(-50%, -60%); }
		100% { transform: translate(-50%, -50%); }
	}

	#PageTop {
		opacity: 1;
		/*position: fixed;←フッターが見えたらabsoluteにするjsで書いてるので書かなくていい*/
		background: radial-gradient(circle at center, transparent 80%, rgba(229, 76, 202, 1) 0%);
	}
	.PageTop-dummy {/* backgroundプロパティにtransitionは効かないので、ダミーで対応 *//* https://chiiweb.net/media/css-transition/ */
		display: block;
		background: radial-gradient(circle at center, transparent 80%, darkmagenta 0%);/*四隅のカラー*/
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
		opacity: 0; /* 最初は見えないように */
		transform: scale(1.225, 1.225);/* 四隅がバラける大きさ */
		transition: .35s ease-in-out; /* 所要時間の指定 */
	}

	#PageTop a {
		display: block;
		width: 100%;
		height: 100%;
	}

	#PageTop a .flexwrap {
		z-index: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px 0;
	}

		#PageTop .triangle,
		#PageTop .horizontal-line {
			display: block;
			margin: 0;
			transition: .4s ease-in-out;
			/* ちらつき対策 */
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden; 
			will-change: transform;
		}
		#PageTop .triangle {/* 矢印の▲ */
			border-left: 9px solid transparent; /* これで横幅16.36pxくらい */
			border-right: 9px solid transparent;/* これで横幅16.36pxくらい */
			border-bottom: 13px solid white; /* 高さ */
		}
		#PageTop .horizontal-line {/* 横線 */
		    width: 16px;
		    height: 3px;
		    background: white;
		}
		#PageTop .circle {/* 表面の円 */
			position: relative;
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 50%;
			background: violet;
			box-sizing: border-box;
			margin: 0 auto;
			transition: .4s ease-in-out;
			transform: scale(0.9, 0.9);
	    }
		#PageTop a:after {/* ホバー時の波紋 */
		    position: absolute;
		    left: 0;
		    top: 0;
		    /*border: 3px solid darkmagenta;*/
		    border-radius: 50%;
		    background: darkmagenta;/*波紋の色*/
		    box-sizing: border-box;
		    width: 100%;
		    height: 100%;
		    content: "";
		    transition: .4s ease-in-out;
		    transform: scale(0, 0);
		}






/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( #headerMobile )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	#headerMobile {
		/*transition: .3s cubic-bezier(.4, 0, .2, 1);*/
		transition: .3s ease 0s;
		grid-template-columns: 70px auto 70px;
		grid-template-rows: 70px;
		background: #fdfdfd;
		width: 100%;
		height: 70px;
		border-bottom: solid #333 1px;
		position: fixed;
	}

		#headerMobile .Menu-dummy {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}
		.headLogoMobile {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
		}
		#headerMobile .Option {
			grid-column: 3 / 4;
			grid-row: 1 / 2;
		}

	/*::::::::::::::::::::::::::::::!!! Menu !!!::::::::::::::::::::::::::::::*/

	.flip, .Option {/* Menu,Optionテキスト */
	    font-size: 16px;
	}

	.Menu-trigger {
		width: 70px;
		height: 70px;
		background: transparent;
		left: 0;
		top: 0;
	}
	.Menu {
		position: absolute;
		left: 0;
		top: 0;
		width: 70px;
		height: 70px;
		cursor:pointer;
	}
	.menu-wrap {
		position: relative;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	.MenuIcon {
		position: absolute;
		top: 15px;
		left: 50%;
		transform: translate(-50%, 0%);
		color: #fdfdfd;
		width: 36px;
	}
		.MenuIcon span {
		    display: block;
		    width: 100%;
		    height: 3px;
		    background: #fdfdfd;
		    position: absolute;
		    left: 0%;
		    transition: 0.5s ease-in-out;
		}
			.MenuIcon span:nth-child(1){top:0;}
			.MenuIcon span:nth-child(2){top:11px;}
			.MenuIcon span:nth-child(3){top:22px;}
				/*開閉ボタンopen時*/
				.reverse .MenuIcon span {background: black;}
				.reverse .MenuIcon span:nth-child(1) {
						top: 11px;
						transform: rotate(135deg);
				}
				.reverse .MenuIcon span:nth-child(2) {
					width: 0;
					left: 50%;
				}
				.reverse .MenuIcon span:nth-child(3) {
					top: 11px;
					transform: rotate(-135deg);
				}
				.reverse .MenuIcon .front, .open #nav_toggle .back {
					transform: initial;
				}
		.flip { /* https://zenn.dev/mattak/articles/ebce00e78c88d9 *//* Menu <=> Closeフリップ */
			/*background-color: transparent;*/
			width: 100%;
			height: 100%;
			perspective: 1000px;
		}
		.flip-inner {
			position: relative;
			width: 100%;
			height: 100%;
			width: 70px;
			height: 70px;
			transition: transform 0.5s ease-in-out;
			transform-style: preserve-3d;
		}

		.flip-front, .flip-back {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;left:0;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			position: absolute; top:0;left:0;background: #7E4CE5;
		}
		.flip-front {color:white;}
		.flip-back {color:black;transform: rotateY(180deg);}
		.flip-front span, .flip-back span { }

		.Menu-dummy {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
			background: black;
			width: 100%;
			height: 100%;
		}

		/*::::::::::::::::::::::::::::::!!! Menu内グローバルナビ !!!::::::::::::::::::::::::::::::*/

		#GlobalNavi {
			display: none;
			width: 100vw;
			height: 100dvh;
			position: fixed;
			top: 0;left: 0;
			background: whitesmoke;
		}
			#g-navi {
				display: grid;
				width: 100%;
				height: 100%;
			}
				#g-navi .closenav {
				    display: flex;
				    flex-direction: column;
				    justify-content: center;
				    align-items: center;
				}
				#g-navi .closenav p, #g-navi .closenav .batsu {
					line-height: 1;
				}
			    #g-navi .closenav strong.batsu {
				    font-size: 250%;
				    font-weight: normal;
			    }

				/* 枠線エフェクト *//* https://coco-factory.jp/ugokuweb/move01/5-3-10/ */
				.border_effect {
					/*display: flex;*/
					/*flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
					list-style: none;
					font-size: 2rem;
					position: fixed;
					top: 0;left: 0;
					width: 100vw;
					height: 100dvh;
				}
				/*.border_effect .base-point a {transition: initial;
					display: block;
					padding:10px 30px;
					text-decoration: none;
					color: #333;
				}*/
				.border_effect .base-point {
					/*線の基点とするためrelativeを指定*/
					position: relative;
					width: 100vw;
					height: 100dvh;
				}
				.border_effect .base-point::before,
				.border_effect .base-point::after {/* 上線 *//* 下線 */
					content:"";
					/*絶対配置で線の位置を決める*/
					position: absolute;
					background:#7E4CE5;
					/*線の形状*/
					width: 0;
					height:5px;
					/*アニメーションの指定*/
					transition: all 0.2s linear;
					z-index: 9999;
				}
				.border_effect .base-point::before { /* 下線 */
					right: 0;
					bottom: 0;
				}

				.border_effect .base-point::after { /* 上線 */
					left: 70px;/* Menuの分 */
					top: 0;
				}
				.border_effect .base-point span {
					display: block;
				}

				.border_effect .base-point span::before,
				.border_effect .base-point span::after {/* 左線 *//* 右線 */
					content:"";
					/*絶対配置で線の位置を決める*/
					position: absolute;
					background: #7E4CE5;
					/*線の形状*/
					width:5px;
					height:0;
					/*アニメーションの指定*/
					transition: all 0.1s linear;
				}

				.border_effect .base-point span::before { /* 左線 */
					left: 0;
					bottom: 0;
				}

				.border_effect .base-point span::after { /* 右線 */
					right: 0;
					top: 0;
				}

				/*現在地とhoverした際の線の変化*/
				.border_effect .base-point.current::before,
				.border_effect .base-point.current::after,
				.border_effect .base-point.effectON::before,
				.border_effect .base-point.effectON::after {
					width: 100%;
				}

				.border_effect .base-point.effectON::after {
					transition-delay: 0.3s;/* 上線をすぐ線を出現させる*/
				}

				.border_effect .base-point.effectON::before {
					transition-delay: 0.5s;/* 下線の出現を0.3秒遅らせる*/
				}

				.border_effect .base-point.current span::before,
				.border_effect .base-point.current span::after,
				.border_effect .base-point.effectON span::before,
				.border_effect .base-point.effectON span::after {
					height: 100%;
				}

				.border_effect .base-point.effectON span::before {
					transition-delay: 0.6s;/*左線の出現を0.5秒遅らせる*/
				}

				.border_effect .base-point.effectON span::after {
					transition-delay: 0.4s;/*右線の出現を0.2秒遅らせる*/
				}



	/*::::::::::::::::::::::::::::::!!! Option !!!::::::::::::::::::::::::::::::*/

	.Option{
		color: white;
		width: 100%;
		height: 100%;
		background: #E54CCA;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-direction: column;
	}
	.drawer-trigger {
		transform: translateY(0px);
	    transition: 0.3s;
	}

	.Rnav {
		overflow-y: auto;
		color: #333333;
		transition: all .5s;
		height: 100%;
		background-color: rgb(16, 69, 153, 0.8);
		position: fixed;
		top: 0;
		right: 0;
	}
	.Rnav.open {
		transform: translateX(0);
		min-height: 100%;
	}
	.Rnav li {
		text-align: left;
		padding-bottom:0.2em;
	}


		.optwrap {
			grid-template-columns: 100%;/*←←←←←←←幅替え←←←←←←←*/
		}

	.optwrap {
		overflow-x: hidden;
		position: relative;
		width: 100%;
		height: auto;
		/*display: grid;
		grid-template-rows: 70px 50px auto;*/
		padding: 70px 15px;
	}

	.GoogleCSERnav {
		/*grid-row: 2;*/
		margin: 0 auto;
	}
	.AdRnav {
		width: 100%;
		height: auto;
		/*grid-row: 3;*/
		margin: 15px auto;
	}
/*
	.SNSLinkRnav {
		grid-row: 3;
		max-height: 100%;
	}
	.SNSLinkRnav a {
		width: 100%;
		height: 25%;
		text-align: center;
	}
	.SNSLinkRnav a img {
		    width: 100%;
	    height: auto;
		border-bottom: solid 1px #fdfdfd;
	}
	.SNSLinkRnav a:nth-child(1) img {
		border-top: solid 1px #fdfdfd;
	}
	.SNSLinkRnav a:nth-child(2) {
		margin: 0;
	}
*/


	.overlay {
		content: "";
		display: block;
		width: 0;
		height: 0;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		transition: opacity .5s;
	}
	.overlay.open {
		width: 100vw;
		height: 100dvh;
		opacity: 1;
	}

	main {
		transition: all .5s;
	}

	header, .stickPan, #contents, footer, #ShareNavi, #PageTop  {
		transition: all .5s;
	}
	main.open header, main.open #contents, main.open .stickPan, main.open footer/*, main.open + #SHAREandTOP #ShareNavi, main.open + #SHAREandTOP #PageTop*/  {
		transition: all .5s;
	}

	.Rnav li {
		text-align: left;
		padding-bottom: 0.2em;
	}

	.RnavAd {
		border: 1px solid #333;
	}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	/*======================SHAREandTOP======================*/

		#ShareNavi.is-bottom, #PageTop.is-bottom { /* フッターのアニメが見えない */
			opacity: 0;
			transform: translateY(-50px);
			pointer-events: none;
		}
/*
		body.iphone #ShareNavi,
		body.ipad #ShareNavi,
		body.android #ShareNavi { display: none; }

		body.iphone #PageTop,
		body.ipad #PageTop,
		body.android #PageTop { display: none; }
*/


@media screen and (orientation: portrait) {

	/*======================Option======================*/
		main.open header, main.open #contents, main.open .stickPan, main.open footer/*, main.open + #SHAREandTOP #ShareNavi, main.open + #SHAREandTOP #PageTop*/  {
			transform: translateX(-80vw);/*←←←←←←←幅替え←←←←←←←*/
		}
		.Rnav {
			width: 80vw;/*←←←←←←←幅替え←←←←←←←*/
			transform: translateX(80vw);/*←←←←←←←幅替え←←←←←←←*/
		}
	/*==================================================*/

		#g-navi {
			grid-template-columns: 40px calc((100vw - 80px) / 2) calc((100vw - 80px) / 2) 40px;
								 /*40px repeat(2, 1fr) 40px こうかくと検証モードではOKでも、モバイルで見るとおかしくなってた（#g-naviがfixedで浮いている要素だからかも？） */
			grid-template-rows: 80px calc( 100svh - 180px ) 100px;
		}
			#g-naviA {
				grid-column: 2;
				grid-row: 2;
			}
			#g-naviB {
				grid-column: 3;
				grid-row: 2;
			}
			#g-navi .closenav {
				grid-column: 1 / 5;
				grid-row: 3;
			}
			#g-navi .TileMenu ul li {
				width: 100%;
				height: 20%;
			}

}

@media screen and (orientation: landscape) {

	/*======================Option======================*/
		main.open header, main.open #contents, main.open .stickPan, main.open footer/*, main.open + #SHAREandTOP #ShareNavi, main.open + #SHAREandTOP #PageTop*/  {
			transform: translateX(-50vw);/*←←←←←←←幅替え←←←←←←←*/
		}
		.Rnav {
			width: 50vw;/*←←←←←←←幅替え←←←←←←←*/
			transform: translateX(50vw);/*←←←←←←←幅替え←←←←←←←*/
		}
	/*==================================================*/
		#g-navi {
			grid-template-columns: 100%;
		    grid-template-rows: 80px repeat(2, calc((100svh - 160px) / 2)) 80px;
		}
			#g-naviA {
				grid-column: 1;
				grid-row: 2;
				display: flex;
				frex-wrap: no-wrap;
			}
			#g-naviB {
				grid-column: 1;
				grid-row: 3;
			}
			#g-navi .closenav {
				grid-column: 1;
				grid-row: 4;
			}
			#g-navi ul {
				display: flex;
				justify-content: center;
			}
			#g-navi .TileMenu ul li {
				width: 19%;
				height: 100%;
			}

}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */

	.DrawerMenu { display:initial; }

	.drawer-trigger {
		position: fixed;
		width: 70px;
		height: 70px;
		background: url('../../common/images/open.jpg') center center / 50px no-repeat;
		top: 15px;
		right: 5px;
	}
	.drawer-trigger.active {
		background: url('../../common/images/close.png') center center / 100% no-repeat;/* 左右・上下 / サイズ */
	}

/*:::::タブ横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::タブ縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */

	.DrawerMenu { display:initial; }

	.drawer-trigger {
		position: fixed;
		width: 70px;
		height: 70px;
		background: url('../../common/images/open.jpg') center 4px / 45px no-repeat;/* 左右・上下 / サイズ */
		top: 0;
		right: 0;
	}
	.drawer-trigger.active {
		background: url('../../common/images/close.png') center 4px / 55px no-repeat;/* 左右・上下 / サイズ */
	}

		#Trigger, #PageTop, .PageTop-dummy {
			width: 50px;
			height: 50px;
		}
		#ShareNavi {
			right: 75px;
		}
		#package li a {
		    width: 40px;
		    height: 40px;
		}
		#Trigger p {
		    font-size: 13px;
		}
		#Trigger .Arrow-L:before {
		    font-size: 25px;
		}


/*:::::スマホ横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */

/*:::::スマホ縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {

} @media screen and (width <= 480px) and (orientation: portrait) {

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE */

} @media screen and (width <= 320px) and (orientation: portrait) {

}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( ホバー時の挙動 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

@media (hover: hover) {

	#Trigger:hover {
		background: rgba(229, 76, 202, 1);
	}

	#package li a:hover {
		transition: .6s;
		transform: scale(1.0) translateY(-0rem);
		box-shadow: 0.4rem 0.4rem 1rem -0.4rem rgba(0,0,0,0.5);
		border-color: rgba(229, 76, 202, 1);
	}
	#package li a:hover img {
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		-o-filter: grayscale(0);
		filter: grayscale(0);
	}
	/* 波紋色 */
	#package li a:hover:after {
		animation: FadeOut forwards .4s linear;
		opacity: 1;
		transform: scale(1.1, 1.1);
	}

	#PageTop a:hover .flexwrap { animation: VerticalMovement 1.1s linear infinite; }

	#PageTop a:hover + .PageTop-dummy {
		opacity: 1;
		transform: scale(1, 1);
	}
	#PageTop a:hover .circle {
		transform: scale(0, 0);
	}
	#PageTop a:hover:after {/* 波紋がそのまま裏面の円に */
		background: rgba(229, 76, 202, 1);
		transform: scale(0.9, 0.9);
	}


}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( ホバーできない機種の挙動 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	#Trigger:active {
		background: rgba(229, 76, 202, 1);
	}

	#package li a:active {
		transition: .6s;
		transform: scale(1.0) translateY(-0rem);
		box-shadow: 0.4rem 0.4rem 1rem -0.4rem rgba(0,0,0,0.5);
		border-color: rgba(229, 76, 202, 1);
	}
	#package li a:active img {
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		-o-filter: grayscale(0);
		filter: grayscale(0);
	}
	/* 波紋色 */
	#package li a:active:after {
		animation: FadeOut forwards .4s linear;
		opacity: 1;
		transform: scale(1.1, 1.1);
	}

	#PageTop a:active .flexwrap { animation: VerticalMovement 1.1s linear infinite; }

	#PageTop a:active + .PageTop-dummy {
		opacity: 1;
		transform: scale(1, 1);
	}
	#PageTop a:active .circle {
		transform: scale(0, 0);
	}
	#PageTop a:active:after {/* 波紋がそのまま裏面の円に */
		background: rgba(229, 76, 202, 1);
		transform: scale(0.9, 0.9);
	}

	#ShareNavi, #PageTop { display: none; }

} @media screen and (1280px <= width <= 1366px) and (orientation: landscape) and (hover: none) {/* 特殊３カラム */

	/* 3カラム時は非ホバー機種でも出したい */
	#ShareNavi { display: flex; }
	#PageTop { display: block; }

}