@charset "utf-8";

/* ! Common Classes
----------------------------------------------- */

html {
	height: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}

body {
	height: 100%;
	min-width: 320px;
	margin: 0;
	color: #333333;
	font-size: 10px;
	font-size: 1.0rem;
	line-height: 1;
	font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
	/* font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif; */
	/*font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "Times New Roman", serif;*/
	/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; */
	/*font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif;*/
	outline: none;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: 'liga', 'kern';
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

input,
button,
select,
textarea {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* ! Link Color
----------------------------------------------- */

a {
	color: #333;
	text-decoration: none;
	outline: none;
}

a:visited {
}

a:hover {
	color: #999;
	text-decoration: none;
}


/* ! Image Rollover
----------------------------------------------- */

a.img-rollover img {
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

a.img-rollover:hover img,
input.img-rollover:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}


/* ! Text Alignment
----------------------------------------------- */

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}

.text-justify {
	text-align: justify !important;
}

.text-nowrap {
	white-space: nowrap !important;
}


/* ! Custom Margin Classes
----------------------------------------------- */

.m00 { margin: 0px !important;}
.m05 { margin: 5px !important;}
.m10 { margin: 10px !important;}
.m15 { margin: 15px !important;}
.m20 { margin: 20px !important;}
.m25 { margin: 25px !important;}
.m30 { margin: 30px !important;}
.m35 { margin: 35px !important;}
.m40 { margin: 40px !important;}

.mt00 { margin-top: 0 !important;}
.mt05 { margin-top: 5px !important;}
.mt10 { margin-top: 10px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt40 { margin-top: 40px !important;}

.mb00 { margin-bottom: 0 !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}

.ml00 { margin-left: 0 !important;}
.ml05 { margin-left: 5px !important;}
.ml10 { margin-left: 10px !important;}
.ml15 { margin-left: 15px !important;}
.ml20 { margin-left: 20px !important;}
.ml25 { margin-left: 25px !important;}
.ml30 { margin-left: 30px !important;}
.ml40 { margin-left: 40px !important;}

.mr00 { margin-right: 0 !important;}
.mr05 { margin-right: 5px !important;}
.mr10 { margin-right: 10px !important;}
.mr15 { margin-right: 15px !important;}
.mr20 { margin-right: 20px !important;}
.mr25 { margin-right: 25px !important;}
.mr30 { margin-right: 30px !important;}
.mr40 { margin-right: 40px !important;}


/* ! Custom Padding Classes
----------------------------------------------- */

.p00 { padding: 0px !important;}
.p05 { padding: 5px !important;}
.p10 { padding: 10px !important;}
.p15 { padding: 15px !important;}
.p20 { padding: 20px !important;}
.p30 { padding: 30px !important;}
.p40 { padding: 40px !important;}

.pt00 { padding-top: 0 !important;}
.pt05 { padding-top: 5px !important;}
.pt10 { padding-top: 10px !important;}
.pt15 { padding-top: 15px !important;}
.pt20 { padding-top: 20px !important;}
.pt25 { padding-top: 25px !important;}
.pt30 { padding-top: 30px !important;}
.pt40 { padding-top: 40px !important;}

.pb00 { padding-bottom: 0 !important;}
.pb05 { padding-bottom: 5px !important;}
.pb10 { padding-bottom: 10px !important;}
.pb15 { padding-bottom: 15px !important;}
.pb20 { padding-bottom: 20px !important;}
.pb25 { padding-bottom: 25px !important;}
.pb30 { padding-bottom: 30px !important;}
.pb40 { padding-bottom: 40px !important;}

.pl00 { padding-left: 0 !important;}
.pl05 { padding-left: 5px !important;}
.pl10 { padding-left: 10px !important;}
.pl15 { padding-left: 15px !important;}
.pl20 { padding-left: 20px !important;}
.pl25 { padding-left: 25px !important;}
.pl30 { padding-left: 30px !important;}
.pl40 { padding-left: 40px !important;}

.pr00 { padding-right: 0 !important;}
.pr05 { padding-right: 5px !important;}
.pr10 { padding-right: 10px !important;}
.pr15 { padding-right: 15px !important;}
.pr20 { padding-right: 20px !important;}
.pr25 { padding-right: 25px !important;}
.pr30 { padding-right: 30px !important;}
.pr40 { padding-right: 40px !important;}

/* ! Utility Classes
----------------------------------------------- */

.clearfix {
	zoom: 1;
}

.clearfix::after {
	content: " ";
	display: block;
	clear: both;
}

.float-right {
	float: right !important;
}

.float-left {
	float: left !important;
}

.hidden {
	display: none !important;
}

.show {
	display: block !important;
}

.invisible {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

/* ! Show & Hide
----------------------------------------------- */

@media screen and (min-width: 641px) {

	.sp {
		display: none !important;
	}

	br.pc {
		display: block !important;
	}

	br.sp {
		display: none !important;
	}

}
@media screen and (max-width: 640px) {

	.pc {
		display: none !important;
	}

	br.pc {
		display: none !important;
	}

	br.sp {
		display: block !important;
	}
}

/* ! images
----------------------------------------------- */
@media screen and (max-width: 640px) {
	img {
		width: 100%;
	}
}


/* ! site only
----------------------------------------------- */

.anchor {
	position: relative;
	top: -4px;
	display: block;
}

@media screen and (max-width: 640px) {
	#wrapper {
		width: 100vw;
		min-width: 320px;
	}

	.anchor {
		position: relative;
		top: -25vw;
		display: block;
	}
}

/*magenta*/
.color01 {
	color: #f33b69;
}
/*blue*/
.color02 {
	color: #3069be;
}
/*green*/
.color03 {
	color: #23b460;
}
/*orange*/
.color04 {
	color: #ffb400;
}
/*cyan*/
.color05 {
	color: #2cadff;
}
/*kyocera_red*/
.color06 {
	color: #df0623;
}
/*orange*/
.color07 {
	color: #ff6427;
}


/*magenta*/
.bg-color01 ,
a.nav_icon01::before ,
.st-category p.color01::before {
	background-color: #f33b69;
}
/*blue*/
.bg-color02 ,
a.nav_icon02::before ,
.st-category p.color02::before {
	background-color: #3069be;
}
/*green*/
.bg-color03 ,
a.nav_icon03::before ,
.st-category p.color03::before {
	background-color: #23b460;
}
/*orange*/
.bg-color04 ,
a.nav_icon04::before ,
.st-category p.color04::before {
	background-color: #ffb400;
}
/*cyan*/
.bg-color05 ,
a.nav_icon05::before ,
.st-category p.color05::before {
	background-color: #2cadff;
}
/*kyocera_red*/
.bg-color06 ,
a.nav_icon06::before ,
.st-category p.color06::before ,
.st-business_title__inner h2::before {
	background-color: #df0623;
}
/*orange*/
.bg-color07 ,
a.nav_icon07::before ,
.st-category p.color07::before {
	background-color: #ff6427;
}

a.btn {
	-webkit-transition: opacity 0.5s ease !important;
	transition: opacity 0.5s ease !important;
	cursor: pointer;
}

a.btn:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}

a.new-window{
	position: relative;
	padding-right: 21px;
}

a.new-window:after{
	position: absolute;
	display: block;
	content: '';
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    background-image: url(../images/common/popup.png);
    background-repeat: no-repeat;
    background-size: contain;
}

a.new-window.new-site:after{
	background-image: url(../images/common/sout.png);
}