@charset "UTF-8"; 
/* --------------------------------------
	global
-------------------------------------- */

	/* hacks */

	@media only screen and (min-width:768px) { .sp { display:none !important; } }
	@media only screen and (max-width:767px) { .pc { display:none !important; } }

	#msc_lotion	img		{ width:100%; display:block; vertical-align:bottom; }
	#msc_lotion a img	{ transition:opacity ease 0.3s;			}
	#msc_lotion .ma		{ margin-left:auto; margin-right:auto;	}
	#msc_lotion .pr		{ position:relative; 					}
	#msc_lotion .pa		{ position:absolute; 					}
	#msc_lotion .pf		{ position:fixed; 						}
	#msc_lotion .db		{ display:block; 						}
	#msc_lotion .di		{ display:inline; 						}
	#msc_lotion .dib	{ display:inline-block; 				}
	#msc_lotion .dn		{ display:none; 						}
	#msc_lotion .df		{ display:flex; 						}
	#msc_lotion .fww	{ flex-wrap:wrap; 						}
	#msc_lotion .fwnw	{ flex-wrap:nowrap; 					}
	#msc_lotion .jcc	{ justify-content:center;				}
	#msc_lotion .jcsb	{ justify-content:space-between;		}
	#msc_lotion .jcfs	{ justify-content:flex-start;			}
	#msc_lotion .jcfe	{ justify-content:flex-end;				}
	#msc_lotion .aic	{ align-items:center;					}
	#msc_lotion .aifs	{ align-items:flex-start;				}
	#msc_lotion .aife	{ align-items:flex-end;					}
	#msc_lotion .oxh	{ overflow-x:hidden;					}
	#msc_lotion .tl		{ text-align:left;						}
	#msc_lotion .tc		{ text-align:center;					}
	#msc_lotion .tr		{ text-align:right;						}
	#msc_lotion .tj		{ text-align:justify;					}
	#msc_lotion .hac	{ left:51%; transform:translateX(-50%);	}
	#msc_lotion .vam	{ top :50%; transform:translateY(-50%);	}

	.marugo { font-family:dnp-shuei-mgothic-std,'Shuei MaruGo',sans-serif!important; font-weight:400; }
	.bold,
	.bold * { font-weight:600 !important; }
	.orange { color:#ff8701; }



/* ----------------------------------
	layout
---------------------------------- */

	body
	{
		scrollbar-width		:none; /*Firefox対応のスクロールバー非表示コード*/
		-ms-overflow-style	:none; /*Internet Explore対応のスクロールバー非表示コード*/
		background:#fffcf4;
	}
	body::-webkit-scrollbar					{ display:none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/ }
	header									{ background:rgba(255,255,255,0.75); max-width:750px; width:100%; height:70px; position:fixed; left:calc(50% - 375px); top:0; padding:0 0 0 25px; z-index:999; }
	header h1								{ width:220px; }
	main									{ margin:0; }
	#msc_lotion								{ max-width:750px; background:#fff; box-shadow:0px 0px 54px 0px rgb(0 0 0 / 30%); overflow-x:hidden; margin:auto; }
	#msc_lotion .btn						{ width:86.134%; bottom:7.4%; }
	footer									{ height:unset; margin:50px 0; }
	
	@media screen and (max-width:750px)
	{
		header								{ width:100vw; height:9.333vw; left:calc(50% - 50vw); padding:0 0 0 3.333vw; }
		header h1							{ width:29.333vw; }
		footer								{ height:unset; margin:0 0 0vw; }
	}

/* ----------------------------------
	 accordion
---------------------------------- */

	#msc_lotion .acc						{ padding-bottom:2%; margin:auto; }
	#msc_lotion .acc .trg::before,
	#msc_lotion .acc .trg::after			{ transition:transform 0.5s; content:''; display:block; background:#ffffff; width:3.6%; height:2%; position:absolute; right:12%; top:50%; }
	#msc_lotion .acc .trg::after			{ transition:transform 0.5s; transform:rotate(90deg); }
	#msc_lotion .acc .trg.active::after		{ transition:transform 0.5s; transform:rotate( 0deg); }



/* ----------------------------------
	links
---------------------------------- */
	.links									{ width:100%; max-width:750px; padding-top:60px; margin:0 auto; }
	.links img								{ max-width:100%; }
	.links a								{ display:block; width:100%; }
	.links a:hover							{ opacity:0.6; }
	.links a img							{ width:100%; }

	.links .branches						{ width:100%; position:absolute; top:30%; }
	.links .branches li						{ line-height:0; margin-bottom:2.5%; }
	.links .branches a						{ width:auto; font-size:32px; line-height:1.3; color:rgb(100, 158, 213)!important; display:inline; border-bottom:1px solid rgb(100, 158, 213); }
	.links .branches a small				{ width:auto; font-size:22px; letter-spacing:4px; }
	.links .branches a:hover				{ opacity:.8; }
	.links .branches a span					{ font-size:70%; }

	.links .tel								{ width: 80%; top:55%; }

	.links .sns1							{ width: 70%; top:83%; }
	.links .sns1 a							{ width:240px; }
	.links .sns2							{ width: 50%; top:90%; }
	.links .sns2 a							{ width:100px; }

	@media screen and (max-width:750px)
	{ 
		.links								{ max-width:100vw; padding-top:8vw; }
		.links .branches a					{ font-size:calc(30*100vw/750); line-height:1.3; color:rgb(100, 158, 213)!important; border-bottom:1px solid rgb(100, 158, 213); }
		.links .branches a small			{ width:auto; font-size:2.933vw; letter-spacing:0.533vw; }
		.links .sns1 a						{ width:calc(240*100vw/750); }
		.links .sns2 a						{ width:calc(100*100vw/750); }
	}



/* ----------------------------------
	footer
---------------------------------- */
	footer .logo							{ margin:0 20% 40px;}
	footer .logo img						{ display:inline; }
	footer .copyright						{ font-size:20px; }

	@media screen and (max-width:750px)
	{ 
		footer .logo						{ margin:0 20% 5.334vw;}
		footer .logo img					{ display:block; margin:0 auto; }
		footer .copyright					{ font-size:2.667vw; }
	}