@charset "UTF-8";

@font-face{
	font-family: 'AmaitorteSugarpowder';
	font-weight: normal;
	font-style: normal;
	src: url(type/amaitortesugarpowder.woff?32) format('woff');
}
@font-face{
	font-family: 'AmaitorteSugarpowder';
	font-weight: bold;
	font-style: normal;
	src: url(type/amaitortesugarpowder.woff?32) format('woff');
}

/* ルートとボディ */
html,
body{
	margin: 0;
	padding: 0;
	min-height: 100%;
  background-color: inherit;
}


html{
	background: #fff;
	color: #111;
	font-size: 16px;
	line-height: 1.6;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', Verdana, sans-serif;
	-webkit-text-size-adjust: 100%;
	/* height: 100%; */
  
}
/*html.macintosh,
html.ios{
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}*/
body{
	min-width: 320px;
	display: flex;
	flex-direction: column;
	/* min-height: 100%; */
}
/*.msie11e body{
	display: block;
}*/

body > *{
	flex-shrink: 0;
	flex-grow: 0;
}
#ContentHeightAdjust{
	flex-grow: 1 !important;
	overflow: hidden;
	padding: 0;
	padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* フォーカス */
.js :focus{
	outline: none;
}
.js.tabkeyenabled :focus{
	outline: 3px solid rgba(196,13,35,0.5);
	outline-offset: 1px;
}


/* 一般要素 */
img{
	border: none;
}
header,footer,main,article,section,nav{
	display: block;
}
*[hidden]{
	display: none;
}
a[href]{
	color: inherit;
}

@media (max-width:600px){
	.onlyonls{
		display: none;
	}
}
@media (min-width:601px){
	.onlyonss{
		display: none;
	}
}






#MainHeader{
	padding: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
}

#MainTitleAndPhoneNumber{
	padding: 10px 20px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 100vw;
}
#MainTitleAndPhoneNumber > div{
	flex-grow: 1;
}

#MainTitle{
	max-width: 460px;
	color: #fff;
	flex-shrink: 0;
	flex-basis: 50%;
	margin: 0;
}
#MainTitle a{
	display: block;
	padding: 0 0 17.391304347826087%;
	height: 0;
	margin: -1% 0 0;
	color: transparent;
	background-image: url(../img/maintitle.svg?v2);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
}


#MainPhoneNumber{
	font-size: 15px;
	margin: 0;
}
#MainPhoneNumber a{
	display: block;
	max-width: 195px;
	padding: 0 0 28px;
	height: 0;
	color: transparent;
	background-image: url(../img/phonenumber.svg);
	background-position: 50% 50%;
	background-size: contain;
	background-repeat: no-repeat;
}
.mouseUI #MainPhoneNumber a:hover{
	filter: brightness(120%);
}
.mouseUI #MainPhoneNumber a:active{
	filter: brightness(90%);
}


#MainHeader ul.sns{
	display: flex;
	justify-content: center;
	margin: 1em;
	padding: 0;
	list-style: none;
	font-size: 10px;
}
#MainHeader ul.sns li{
	margin: 0;
	padding: 0;
	width: 4.4em;
	height: 4.4em;
}
#MainHeader ul.sns li + li{
	margin-left: 1em;
}
#MainHeader ul.sns li a{
	display: block;
	width: 100%;
	height: 100%;
	color: transparent;
	overflow: hidden;
	background-image: url(../img/sns_x.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
#MainHeader ul.sns li a.instagram{
	background-image: url(../img/sns_instagram.svg);
}
#MainHeader ul.sns li a.facebook{
	background-image: url(../img/sns_facebook.svg);
}
.mouseUI #MainHeader ul.sns li a:hover{
	filter: brightness(120%);
}
.mouseUI #MainHeader ul.sns li a:active{
	filter: brightness(90%);
}

#MainHeader ul.sns#LSSNS{
	margin: 0 0 0 15px;
}


@media (max-width:1200px){
	#MainTitle{
		max-width: 38.333333333333333%;
	}
	#MainHeader ul.sns#LSSNS{
		font-size: 0.833333333333333vw;
	}
	#MainPhoneNumber{
		font-size: 1.25vw;
	}
	#MainPhoneNumber a{
		max-width: 16.25vw;
		padding: 0 0 2.333333333333333vw;
	}
}
@media (max-width:600px){
	#MainTitleAndPhoneNumber{
		padding: 10px;
		min-height: 44px;
	}
	#MainTitle{
		flex-basis: 70%;
		max-width: 250px;
		margin-right: 54px;
	}
	#MainTitleAndPhoneNumber > div,
	#MainHeader ul.sns#LSSNS,
	#MainPhoneNumber{
		display: none;
	}
}



#LSMenu{
	/*flex-grow: 1;*/
	margin: 0 0;
	background-color: #EDEDED;
	display: flex;
	text-align: center;
	font-size: 0;
	flex-wrap: wrap;
	max-width: 100vw;
}

#LSMenu ul{
	display: flex;
	margin: 0 auto;
	/*max-width: 1520px;*/
	width: 100%;
	max-width: 1360px;
	padding: 0;
	justify-content: space-between;
}
#LSMenu ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 21px;
	line-height: 1.5;
	flex-shrink: 0;
}
#LSMenu ul li a{
	display: block;
	color: #4e6d49;
	font-weight: normal;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	padding: 0.5em;
}
.mouseUI #LSMenu ul li a:hover{
	filter: brightness(140%);
}
.mouseUI #LSMenu ul li a:active{
	filter: brightness(80%);
}
#LSMenu ul li.newapply a,
#LSMenu ul li.contact a,
#LSMenu ul li.cart a,
#LSMenu ul li.login a{
	padding-left: 2em;
	background-size: 2em auto;
	
	background-repeat: no-repeat;
	background-position: 0 50%;
}
#LSMenu ul li.newapply a{
	background-image: url(../img/menu_green_newapply.svg);
}
#LSMenu ul li.contact a{
	background-image: url(../img/menu_green_contact.svg);
}
#LSMenu ul li.cart a,
#LSMenu ul li.login a{
	background-image: url(../img/menu_green_cart.svg);
}

@media (max-width:1440px){
	#LSMenu ul{
		justify-content: space-around;
		max-width: none;
	}
}
@media (max-width:1360px){
	#LSMenu ul li{
		font-size: 1.544117647058824vw;
	}
	#LSMenu ul li a{
	}
}
@media (max-width:600px){
	#LSMenu{
		display: none;
	}
}


#MenuOpener{
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	width: 64px;
	padding: 42px 0 0;
	overflow: hidden;
	margin: 0;
	cursor: pointer;
	text-align: center;
}
#MenuOpener:before,
#MenuOpener:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 64px;
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	opacity: 1;
	background-image: url(../img/menu.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.loading #MenuOpener:before,
.loading #MenuOpener:after{
	transition: none;
}
#MenuOpener:after{
	background-image: url(../img/menuclose.svg);
	transform: rotate(135deg);
}
#MenuOpener[aria-expanded="true"]:before,
#MenuOpener[aria-expanded="false"]:after{
	opacity: 0;
}
#MenuOpener[aria-expanded="true"]:before{
	transform: rotate(-135deg);
}
#MenuOpener[aria-expanded="true"]:after{
	transform: rotate(0deg);
}
#SSMenu{
	display: none;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	background-color: #EDEDED;
	/* background-color: rgba(255,255,255,0.9);
	-webkit-backdrop-filter: blur(5px); */
	position: fixed;
	z-index: 9999;
	top: 64px;
	right: 8px;
	bottom: 8px;
	border-radius: 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
/* .loading #SSMenu{
	display: none;
} */
#SSMenu[aria-hidden="false"]{
	opacity: 1;
	pointer-events: auto;
}
#SSMenu ul.mmhierar{
	margin: 0;
	padding: 0 20px;
	list-style: none;
}
#SSMenu ul.mmhierar ul{
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
}
#SSMenu ul.mmhierar li{
	margin: 0;
	padding: 0;
	border-top: 1px solid #ddd;
}
#SSMenu ul.mmhierar:first-child > li:first-child{
	border-top: none;
}
#SSMenu ul.mmhierar li a{
	display: block;
	line-height: 1.25;
	margin: 0;
	padding: 7px 0;
	font-size: 15px;
	color: #4e6d49;
	text-decoration: none;
	font-weight: normal;
}
#SSMenu ul.mmhierar ul li a{
	font-size: 14px;
	color: #4e6d49;
}

#SSMenu ul.sns#SSSNS{
	font-size: 9px;
	border-top: 1px solid #ddd;
	margin: 0 20px 0;
	padding: 14px 0 0;
}
#SSMenu ul.sns#SSSNS li{
	border-top: none !important;
}

@media (max-width:600px){
	#MenuOpener{
		display: block;
	}
	#SSMenu{
		display: block;
	}
}











#SSBottomHeader{
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5000;
	
	background-color: #e5e5e5;
	color: #404040;
	padding: 0;
	padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
}

#SSBottomHeader ul{
	display: flex;
	margin: 0 auto;
	/*max-width: 1520px;*/
	max-width: 1360px;
	padding: 0 5px 0 0;
	justify-content: space-around;
}
#SSBottomHeader ul li{
	display: inline-block;
	vertical-align: top;
	font-size: 11px;
	line-height: 1.5;
	flex-shrink: 0;
	margin: 0;
}
#SSBottomHeader ul li a{
	display: block;
	color: #404040;
	font-weight: bold;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	padding: 2em 0;
}
.mouseUI #SSBottomHeader ul li a:hover{
	filter: brightness(140%);
}
.mouseUI #SSBottomHeader ul li a:active{
	filter: brightness(80%);
}
#SSBottomHeader ul li.newapply a,
#SSBottomHeader ul li.contact a,
#SSBottomHeader ul li.cart a{
	padding-left: 2.75em;
	background-size: 3em auto;
	
	background-repeat: no-repeat;
	background-position: 0 50%;
}
#SSBottomHeader ul li.newapply a{
	background-image: url(../img/menu_black_newapply.svg);
}
#SSBottomHeader ul li.contact a{
	background-image: url(../img/menu_black_contact.svg);
}
#SSBottomHeader ul li.cart a{
	background-image: url(../img/menu_black_cart.svg);
}

@media (max-width:600px){
	#SSBottomHeader{
		display: block;
	}
}
@media (max-width:360px){
	#SSBottomHeader ul li{
		font-size: 10px;
	}
}






#MainFooter{
	display: block;
	overflow: hidden;
	font-size: 16px;
	margin: 10% 0 0;
	margin: 10vw 0 0;
	text-align: center;
}
@media (max-width:600px){
	#MainFooter{
		margin: 70px;
		margin-bottom: calc(70px + env(safe-area-inset-bottom));
	}
}

#MainFooter a{
	color: inherit;
	text-decoration: underline;
}
.mouseUI #MainFooter a:hover{
	filter: brightness(110%);
}
.mouseUI #MainFooter a:active{
	filter: brightness(80%);
}

#MainFooter > p{
	text-align: center;
	margin: 1em 0;
}
#MainFooter > p small:only-child{
	font-size: inherit;
}
#MainFooter > p:last-child{
}


/*ページトップに戻るボタン*/
#PageTop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	margin: 0;
	margin: 0 0 env(safe-area-inset-bottom);
	
	opacity: 1;
	z-index: 5000;
	
	transition:
		z-index 0.4s ease-out,
		opacity 0.4s ease-out;
}
#PageTop a{
	display: block;
	width: 80px;
	height: 80px;
	color: transparent;
	overflow: hidden;
	border-radius: 999px;
	
	background-color: rgba(255,255,255,0.65);
	background-size: cover;
	background-image: url(../img/upbutton.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.mouseUI #PageTop a:hover{
	background-color: rgba(255,255,255,0.65);
	filter: brightness(110%);
}
.mouseUI #PageTop a:active{
	background-color: rgba(255,255,255,0.65);
	filter: brightness(90%);
}
#PageTop.hidden{
	opacity: 0;
	z-index: -3;
}
.msie8e #PageTop.hidden{
	display: none;
}
@media (max-width:600px){
	#PageTop{
		bottom: 72px;
		right: 18px;
		margin: 0 0 env(safe-area-inset-bottom);
	}
	#PageTop a{
		width: 50px;
		height: 50px;
	}
}












#Directory{
	max-width: 1360px;
	margin: 1em auto 0.5em;
	color: #727171;
	font-size: 0.75em;
	padding: 0 10px;
}
#Directory ul{
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}
#Directory ul li{
	display: block;
	margin: 0;
	padding: 0;
}
#Directory ul li + li:before{
	content: "> ";
	display: inline-block;
	vertical-align: top;
	padding: 0 1em;
}
.mouseUI #Directory ul li a[href]:hover{
	opacity: 0.8;
}
.mouseUI #Directory ul li a[href]:active{
	opacity: 1;
	filter: brightness(90%);
}













main{
	position: relative;
}
main img{
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

#PageHeader{
	display: block;
}
@media (max-width:600px){
	#PageHeader{
		display: none;
	}
}
#PageHeader:before{
	content: "";
	display: block;
	height: 0;
	background-size: cover;
	background-position: 50% 50%;
}
#PageHeader nav{
	display: block;
	margin: 1em auto 1em;
	padding: 0 10px;
	font-size: 16px;
	text-align: center;
}
#PageHeader ul{
	display: block;
	margin: 0;
	padding: 0;
}
#PageHeader ul li{
	display: inline-block;
	vertical-align: top;
	padding: 0.2em 1em;
}
#PageHeader ul li a{
	display: block;
	padding-left: 1.5em;
	white-space: nowrap;
	line-height: 1.5;
	text-decoration: none;
	background-size: 1.375em auto;
	background-image: url(../img/rightarrowformenu.svg);
	background-repeat: no-repeat;
	background-position: 0 50%;
}
.mouseUI #PageHeader ul li a:hover{
	opacity: 0.8;
}
.mouseUI #PageHeader ul li a:active{
	opacity: 1;
	filter: brightness(90%);
}
@media (max-width:1366px){
	#PageHeader nav{
		font-size: 16px;
	}
}
@media (max-width:600px){
	#PageHeader nav{
		font-size: 14px;
	}
}





#PageTitle{
	margin: 1em auto;
	padding: 0 10px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: normal;
	text-align: center;
	color: #777;
}
main > #PageTitle:first-child{
	margin-top: 0.5em;
}
@media (max-width:600px){
	#PageTitle{
		font-size: 24px;
	}
}
#PageTitle small{
	display: block;
	font-size: 0.55em;
}







#PageBody{
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 10px;
	position: relative;
}
#PageBody.thin{
	max-width: 1000px;
}


main h1{
	font-weight: inherit;
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
	color: #808080;
}
main h1.hidden{
	font-size: 1em;
	height: 1px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: none;
}

.mrmmsection{
	margin: 3em 0;
	line-height: 1.75;
}
section.mrmmsection,
.borderedsection{
	margin: 1.5em 0;
	border: 1px solid #999;
	border-radius: 10px;
	padding: 1em;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#PageBody > section.mrmmsection:first-child,
#PageBody > .borderedsection:first-child{
	margin-top: 3em;
}
#PageBody > section.mrmmsection:last-child,
#PageBody > .borderedsection:last-child{
	margin-bottom: 3em;
}
section.mrmmsection > *:first-child,
.borderedsection > *:first-child{
	margin-top: 0;
}
section.mrmmsection > *:last-child,
.borderedsection > *:last-child{
	margin-bottom: 0;
}

.mrmmsection:after{
	content: "";
	clear: both;
}

.mrmmsection h2{
	font-size: 1.8em;
	color: #808080;
	margin: 0 0 0.555555555555556em;
}
.mrmmsection h3{
	font-size: 1.4em;
	color: #808080;
	margin: 0 0 0.714285714285714em;
}
.mrmmsection h4{
	font-size: 1.1em;
	color: #808080;
	margin: 0 0 0.909090909090909em;
}
.mrmmsection h5{
	font-size: 1em;
	color: #808080;
	margin: 0;
}
.mrmmsection h6{
	font-size: 0.6em;
	color: #808080;
	margin: 0;
}
.mrmmsection h3.green,
.mrmmsection h4.green,
.mrmmsection h5.green,
.mrmmsection h6.green{
	color: #70a29f;
}
@media (max-width:600px){
	.mrmmsection{
		/* font-size: 13px; */
	}
	.mrmmsection h2{
		font-size: 1.6em;
		color: #808080;
	}
	section.mrmmsection{
		padding: 1em 10px;
	}
}

/* Mフォーム */
.mrmmformgroup.graygroup{
	background-color: #F1F1F1;
}
.mrmmformgroup.bluegroup{
	background-color: #D8EFFC;
}
.mrmmformgroup.bluegroup{
	background-color: #D8EFFC;
}
body{
	--mrmmformcolour: #4BAA7A !important;
}
.mrmmformgroup input::-webkit-outer-spin-button,
.mrmmformgroup input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mrmmformgroup input[type=number] {
	-moz-appearance: textfield;
}