@charset "utf-8";
/* CSS Document */

.nm{ font-size: 12px; line-height: 20px; }
.ns{ font-size: 10px; line-height: 14px; }
.spt5{ margin-top: 5px; }
.spt10{ margin-top: 10px; }
.spt15{ margin-top: 15px; }
.spt20{ margin-top: 20px; }
.spt25{ margin-top: 25px; }
.spt30{ margin-top: 30px; }
.spt40{ margin-top: 40px; }
.spt50{ margin-top: 50px; }
.spt60{ margin-top: 60px; }
.spt70{ margin-top: 70px; }
.spt80{ margin-top: 80px; }
.spt90{ margin-top: 90px; }
.spt100{ margin-top: 100px; }
.spt110{ margin-top: 110px; }
.spt120{ margin-top: 120px; }
.spt130{ margin-top: 130px; }
.spt140{ margin-top: 140px; }
.spt150{ margin-top: 150px; }
.invalid-line-height{ line-height: 0; }
.ovf-h{ overflow: hidden; }
.full-width{ width: 100%; }
.txt-left{ text-align: left; }
.txt-center{ text-align: center; }
.txt-right{ text-align: right; }
.txt-indent{ text-indent: -1em; padding-left: 1em; display: block; }
.txt-hide{ text-indent: 101%; display: block; white-space: nowrap; overflow:hidden; }
.inline-block{ display: inline-block; }
.clearfix:after{ display: block; clear: both; height: 0; visibility: hidden; content: ""; }
.content img{ display: inline-block; }
.sw-elm .pc,.sw-elm .sp{ display: none; }
.sw-elm .pc{ display: block; }
.sw-elm img.pc{ display: inline; }
@media screen and (max-width: 640px){ /*1112px以下のcss*/
	.sp-none{ display: none; }
	.sw-elm .pc,.sw-elm img.pc{ display: none; }
	.sw-elm .sp{ display: block; }
	.sw-elm img.sp{ display: inline; }
	.spt5.-liquid-base{ margin-top: 1.56%; }
	.spt10.-liquid-base{ margin-top: 3.13%; }
	.spt15.-liquid-base{ margin-top: 4.69%; }
	.spt20.-liquid-base{ margin-top: 6.25%; }
	.spt25.-liquid-base{ margin-top: 7.81%; }
	.spt30.-liquid-base{ margin-top: 9.38%; }
	.spt40.-liquid-base{ margin-top: 12.5%; }
	.spt50.-liquid-base{ margin-top: 15.63%; }
	.spt60.-liquid-base{ margin-top: 18.75%; }
	.spt70.-liquid-base{ margin-top: 21.88%; }
	.spt80.-liquid-base{ margin-top: 25%; }
	.spt90.-liquid-base{ margin-top: 28.13%; }
	.spt100.-liquid-base{ margin-top: 31.25%; }
	.spt110.-liquid-base{ margin-top: 34.38%; }
	.spt120.-liquid-base{ margin-top: 37.5%; }
	.spt130.-liquid-base{ margin-top: 40.63%; }
	.spt140.-liquid-base{ margin-top: 43.75%; }
	.spt150.-liquid-base{ margin-top: 46.88%; }
	.full-width.-liquid-base{ width: auto; }
	.txt-center.-liquid-base{ text-align: left; }
	.txt-right.-liquid-base{ text-align: left; }
}

#main{ background: #ffffff; }
#main .content{ padding: 0; width: auto; }
#main .hapieco-header{ width: 1000px; margin: 10px auto; position: relative; }
#main .hapieco-header .navi-list{ display: -ms-flex; display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#main .hapieco-header .navi-list .navi+.navi{ margin-left: 10px; }
#main .hapieco-footer{ /*width: 890px;*/ width: 1000px; margin: 20px auto; position: relative; }
#main .hapieco-footer .navi-list{ display: -ms-flex; display: flex; justify-content: space-between; flex-wrap: wrap; }
#main .hapieco-footer .navi-list .navi{ width: 24.5%; }
#main .hapieco-footer .navi-list .navi a img{ max-width: 100%; height: auto; }
#main .hapieco-footer .logo{ text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #dddddd; }
.js-inview{ opacity: 0; transition: opacity 1s ease-in; }
.show{ opacity: 1!important; }





@media screen and (max-width: 480px){ /*1112px以下のcss*/
	#main .content{ margin: 0; }
	#main .hapieco-header{ width: auto; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; padding: 3%; margin: 0; }
	#main .hapieco-header .logo{ width: 20%; }
	#main .hapieco-header .navi-list{ width: 75%; position: static; transform: none; justify-content: space-between; flex-wrap: wrap; }
	#main .hapieco-header .navi-list .navi{ width: 49%; }
	#main .hapieco-header .navi-list .navi+.navi{ margin-left: 0; }
	#main .hapieco-header .navi-list .navi:nth-child(n+3){ margin-top: 2%; }
	#main .hapieco-footer{ width: auto; margin: 0; padding: 5%; }
	#main .hapieco-footer .navi-list .navi{ width: 49%; }
	#main .hapieco-footer .navi-list .navi:nth-child(n+3){ margin-top: 2%; }
	#main .hapieco-footer .logo{ margin-top: 5%; padding-top: 5%; }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5),screen and (min-resolution: 1.5dppx){
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 480px),screen and (min-resolution: 1.5dppx) and (max-width: 480px){
}