@charset "utf-8";
html{
	width:100%;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

body{
	width:100%;
	color:#333;
}
em{
	font-style:normal;
	font-weight:bold;
}
.spOnly{display:block;}
.pcOnly{display:none;}
a:link,
a:visited{
	color:#333;
	text-decoration:underline;
	}
a:active,
a:hover{
	color:#333;
	text-decoration:underline;
	}
img {
	border:0;
	vertical-align:top;
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}
.img100{
	width:100%;
}
.w1000{
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.w90{
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.w96{
	width:96%;
	margin-left:auto;
	margin-right:auto;
}
.fMin{
		font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
@media print, screen and (min-width:768px) {
	.spOnly{display:none;}
	.pcOnly{display:block;}
	a{
		transition-duration:0.3s;
		}
	a:hover{
		opacity: 0.7;
		}
}/* base */





/*header
----------------------------------------------------------- */
header{
	width:100%;
	height:50px;
	background-color: #fff;
	z-index:200;
	left:0;
	top:0;
	transition: all 0.3s ease-out;
	position:fixed;
}
main{
	padding-top:50px;
}
.anchor{
	display:block;
	margin-top:-50px;
	padding-top:50px;
}
#hWrap01{
}
#hLogo{
	width:150px;
	margin:5px 0 0 5px;
}
#hLogo a{
	text-decoration: none;
	display:block;
}
#hLogo img{
	width:100%;
}
#hConPc{
	display:none;
}
#hConSp{
	width:90px;
	height:50px;
	display:flex;
	position:fixed;
	right:50px;
	top:0;
}
#hConSp > a{
	display:block;
	width:45px;
	height:50px;
	font-size:10px;
	padding-top:7px;
	color:#fff;
	text-decoration: none;
	text-align:center;
}
#hConSp > a#hConSpTel{background-color:#de2525;}
#hConSp > a#hConSpCon{background-color:#00a0e9;}
#hConSp > a > img{
	width:24px;
}
#hConSp > a > p{
	margin-top:1px;
}
/*ハンバーガーボタン*/	
#hBtnMenu{
	position:fixed;
	top:0;
	right:0;
	width:50px;
	height:50px;
	padding-top:10px;
	text-align:center;
	z-index:10;
}
#hBtnMenu span {
	position: absolute;
	top: 0;
	left: 13px;
	display: block;
	width: 24px; /* 横幅 */
	height: 2px; /* 1本辺りの高さ */
	background: #00a0e9; /* 線の色 */
	transition: all 0.3s ease-out;
  }
 
#hBtnMenu .hbBar01 { top: 8px; }
#hBtnMenu .hbBar02 { top: 18px; }
#hBtnMenu .hbBar03 { top: 28px; }

#hBtnMenu p{
	display:block;
	padding:22px 0 0 0;
	font-size:0.625em;
	color:#00a0e9;
	text-align:center;
	}

#hBtnMenu.open span{
	background: #00a0e9; /* 線の色 */
	}

/* 最上部の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar01 {
  top: 20px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 上から2番目の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
#hBtnMenu.open .hbBar03 {
  top: 20px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
/*gnav*/
#gNav{
	position:absolute;
	display:none;
	width:100%;
	top:50px;
	left:0;
	background:#fff;
	z-index:100;
	}

#gNav > ul > li{
	text-align:center;
	overflow:hidden;
	font-size:1.6rem;
}
#gNav > ul > li.sp{display:inline-block;}
#gNav > ul > li.pc{display:none;}
@media print, screen and (min-width:768px) {
	#gNav > ul > li.sp{display:none;}
	#gNav > ul > li.pc{display:inline-block;}
}
#gNav > ul > li > a{
	display:block;
	height:40px;
	line-height:40px;
	overflow:hidden;
	color:#333;
	text-align:center;
	text-decoration:none;
	}

#posting #gNav > ul > li:nth-child(3) > a{
	color:#009beb;
	}

@media print, screen and (min-width:768px) {
	header{
		position:fixed;
		height:150px;
	}
	main{
		padding-top:150px;
	}
	.anchor{
		margin-top:-150px;
		padding-top:150px;
	}
	#hWrap01{
		margin:10px auto 20px;
		width:96%;
		display:flex;
		justify-content:space-between;
	}
	#hLogo{
		width:260px;
		margin:0;
	}
	#hConPc{
		display:flex;
		justify-content: flex-end;
		width:calc(100% - 260px);
	}
	#hConPcTel{
		margin-top:10px;
		display:block;
		text-align:left;
		line-height:1.25;
		margin-right:20px;
	}
	#hConPcTel p:nth-child(1),
	#hConPcTel p:nth-child(3){
		font-size:1.2rem;
	}
	#hConPcTel p:nth-child(2){
		font-size:3rem;
		font-family: 'Lato', sans-serif;
		font-weight: 700;
	}
	#hConPcCon{
		margin-top:12px;
		display:block;
		width:170px;
		color:#fff;
		text-decoration: none;
		height:70px;
		line-height:70px;
		font-size:1.6rem;
		letter-spacing:0.1em;
		font-weight: bold;
		background-color:#00a0e9;
		position:relative;
		padding-left:10px;
	}
	#hConPcCon::before{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:10px;
		margin-top:-12px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 12px 0 12px 8px;
		border-color: transparent transparent transparent #fff;
		z-index:2;
	}
	#hBtnMenu{
		display:none;
	}
	#hConSp{
		display:none;
	}
	/*gNav*/
	#gNav{
		width:100%;
		margin:0 auto;
		position:static;
		display:block !important;
		text-align:center;
		background:none;
		border-top:none;
		overflow:hidden;
		height:auto;
		background-size:100% 4px;
		background-repeat:no-repeat;
		background-position:top left;
		}
	#gNav > ul{
		width:96%;
		max-width:1000px;
		text-align:center;
		vertical-align: top;
		padding:0;
		margin:0 auto;
		height:auto;
		overflow:hidden;
		display:flex;
		justify-content: center;
		flex-wrap:wrap;
	}
	#gNav > ul > li:first-child{
		border-left:1px solid #ccc;
	}
	#gNav > ul > li{
		width:auto;
		display:block;
		margin:0 0 10px;
		padding:0;
		text-align:center;
		overflow: visible;
		font-size:1.2rem;
		border-right:1px solid #ccc;
	}
	#gNav > ul > li > a{
		display:block;
		padding:0 1.5vw;
		color:#000;
		height:20px;
		line-height:20px;
	}
}

@media print, screen and (min-width:880px) {
	header{
		position:fixed;
		height:170px;
	}
	main{
		padding-top:170px;
	}
	.anchor{
		margin-top:-170px;
		padding-top:170px;
	}
	#hLogo{
		width:330px;
		margin:0;
	}
	#hConPcTel p:nth-child(1),
	#hConPcTel p:nth-child(3){
		font-size:1.6rem;
	}
	#hConPcTel p:nth-child(2){
		font-size:3.8rem;
	}
	#hConPcCon{
		height:80px;
		line-height:80px;
	}
	#gNav > ul > li{
		font-size:1.4rem;
	}
	#gNav > ul > li > a{
		padding:0 1em;
	}
}
@media print, screen and (min-width:1000px) {
	#gNav > ul > li > a{
		padding:0 1.5em;
	}
}



/*footer
----------------------------------------------------------- */
footer{
	padding:0 0 20px;
	background-color:#f2f2f2;
	margin-top:40px;
}
footer .inner{
	width:100%;
}
#fNav ul{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	margin-bottom:20px;
}
#fNav li{
	width:50%;
	border-bottom:1px solid #ccc;
}
#fNav li:nth-child(2n+1){
	width:50%;
	border-right:1px solid #ccc;
}
#fNav li a{
	display:block;
	line-height:40px;
	text-decoration: none;
	font-size:1.2rem;
}
#fCompany{
	width:90%;
	margin:0 auto 30px;
	text-align:center;
}
#fLogo{
	max-width:200px;
	margin:0 auto 10px;
}
#fComAddress{
	font-size:1.4rem;
	margin-bottom:10px;
}
#fConTel01{
	font-size:1.2rem;
}
#fConTel02{
	font-size:3rem;
	line-height:1.2;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}
#fConTel03{
	font-size:1.2rem;
}
#copyright{
	font-size:1.2rem;
	text-align:center;
}
@media print, screen and (min-width:768px) {
	footer{
		padding:25px 0 10px;
		background-color:#f2f2f2;
		margin-top:80px;
	}
	footer .inner{
		width:90%;
		max-width:1000px;
		margin:0 auto;
		display:flex;
		flex-direction: row-reverse
	}
	/**/
	#fNav ul{
		display:flex;
		flex-direction: column;
		flex-wrap:wrap;
		height:200px;
		width:320px;
		margin:30px 0 0;
	}
	#fNav li{
		width:50%;
		height:40px;
		border-bottom:0;
		text-align:left;
	}
	#fNav li:nth-child(2n+1){
		border-right:0;
	}
	#fNav li a{
		display:block;
		line-height:2;
		font-size:1.6rem;
	}
	/**/
	#fCompany{
		width:calc(100% - 320px);
		text-align:left;
	}
	#fLogo{
		max-width:310px;
		margin:0 0 10px;
	}
	#fComAddress{
		font-size:1.6rem;
		margin:0;
	}
	#fConTel01{
		font-size:1.6rem;
	}
	#fConTel02{
		font-size:3.8rem;
		line-height:1.1;
	}
	#fConTel03{
		font-size:1.6rem;
	}
	#copyright{
		font-size:1.5rem;
	}
}
@media print, screen and (min-width:880px) {
	#fComAddress{
		font-size:2rem;
	}
}



/*common unit
----------------------------------------------------------- */
.sec01{padding:0 0 40px 0;}
@media print, screen and (min-width:768px) {.sec01{padding:0 0 80px 0;}}
.sec02{padding:40px 0;}
@media print, screen and (min-width:768px) {.sec02{padding:80px 0;}}
.sec03{padding:0 0 40px 0;}
/**/

.lNav ul{
	margin:0 auto 40px;
}
.lNav li{
	width:150px;
	margin:0 auto 10px;
}
.lNav li a{
	display:block;
	border:1px solid #333;
	color:#000;
	line-height:30px;
	font-size:1.2rem;
	text-decoration: none;
	position:relative;
	z-index:100;
}
.lNav li a::before{
	display:block;
	position:absolute;
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-color: transparent transparent transparent #333;
	left:5px;
	top:50%;
	margin-top:-5px;
}
.lNav li.current a{
	color:#fff;
	background-color:#00a0e9;
}
.lNav li.current a::before{
	border-color: transparent transparent transparent #fff;
}
@media print, screen and (min-width:768px) {
	.lNav ul{
		display:flex;
		justify-content: center;
	}
	.lNav li{
		width:150px;
		margin:0 10px;
	}
}


/*background
----------------------------------------------------------- */
.bg01{
	background-color:#e5f5fd;
}
.bg02{
	background-color:#f5f5f5;
}


/*title
----------------------------------------------------------- */
#pageTtl{
	width:100%;
	height:160px;
	background-size:cover;
	background-position:center center;
	display:flex;
	align-items: center;
	margin:0 0 40px;
}
#pageTtl h2{
	display:inline-block;
	margin:0 auto;
	font-size:2.5rem;
	line-height:60px;
	padding:0 1.5em;
	background-color:rgba(255,255,255,0.9);
	letter-spacing:0.15em;
}
#pageTtl h2.en{
	font-family: 'Lato', sans-serif;
	font-size:3rem;
}
#pageTtl h2.small{
	font-size:1.5rem;
}
@media print, screen and (min-width:768px) {
	#pageTtl{
		height:260px;
		margin:0 0 60px;
	}
	#pageTtl h2{
		font-size:3.8rem;
		line-height:90px;
	}
	#pageTtl h2.en{
		font-size:4.8rem;
	}
	#pageTtl h2.small{
		font-size:3rem;
	}
}
/* 取扱製品タイトル */
#pageTtlPro{
	width:100%;
	background-size:cover;
	background-position:center center;
	padding:40px 0 0;
	margin:0;
}
#pageTtlPro h2{
	display:inline-block;
	margin:0 auto;
	font-size:2.5rem;
	line-height:60px;
	padding:0 1.5em;
	background-color:rgba(255,255,255,0.9);
	letter-spacing:0.15em;
	margin-bottom:40px;
}
#pageTtlPro .sub{
	background-color:rgba(255,255,255,0.9);
	padding:30px 5%;
}
#pageTtlPro .sub h3{
	font-size:2rem;
}
#pageTtlPro .sub p{
	font-size:1.2rem;
}
#pageTtlPro .sub ul{
	max-width:320px;
	margin:20px auto 0;
	display:flex;
}
#pageTtlPro .sub li{
	width:48%;
}
#pageTtlPro .sub li:nth-of-type(1){
	margin-right:4%;
}
#pageTtlPro .sub li > a{
	display:block;
	font-size:1.2rem;
	line-height:30px;
	background-color:#fff;
	color:#333;
	border:1px solid #333;
	text-decoration: none;
	position:relative;
}
#pageTtlPro .sub li > a::before{
	position:absolute;
	content:"";
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 4px;
	border-color: transparent transparent transparent #333;
	left:10px;
	top:calc(50% - 4px);
}
#pageTtlPro .sub li.on > a{
	background-color:#00a0e9;
	color:#fff;
}
#pageTtlPro .sub li.on > a::before{
	border-color: transparent transparent transparent #fff;
}
@media print, screen and (min-width:768px) {
	#pageTtlPro{
		padding:80px 0 0;
	}
	#pageTtlPro h2{
		font-size:3.8rem;
		line-height:90px;
		margin-bottom:80px;
	}
	#pageTtlPro .sub{
		padding:40px 5%;
	}
	#pageTtlPro .sub h3{
		font-size:2.8rem;
	}
	#pageTtlPro .sub p{
		font-size:1.8rem;
	}
}
/**/
.ttl01{
	border-left:10px solid #333;
	padding-left:10px;
	text-align:left;
	font-weight: normal;
	line-height:1;
	margin:0 0 30px;
}
.ttl01 .en{
	font-size:4rem;
	font-family: 'Open Sans', sans-serif;
	margin-bottom:8px;
}
.ttl01 .jp{
	font-size:2rem;
}
@media print, screen and (min-width:768px) {
	.ttl01{
		margin:0 0 50px;
	}
	.ttl01 .en{
		font-size:5.5rem;
	}
	.ttl01 .jp{
		font-size:2.6rem;
	}
}
/**/
.ttl02{
	border-left:6px solid #333;
	padding-left:10px;
	text-align:left;
	line-height:1.2;
	margin:0 0 30px;
	letter-spacing:0.05em;
	font-size:2rem;
}
.ttl02.en{
	font-size:2.4rem;
	line-height:1;
	letter-spacing:0.05em;
	font-family: 'Lato', sans-serif;
}
@media print, screen and (min-width:768px) {
	.ttl02{
		margin:0 0 50px;
		font-size:3rem;
	}
	.ttl02.en{
		font-size:3.6rem;
	}
}
/**/
.ttl03{
	font-size:2rem;
	font-weight: bold;
	text-align:center;
	letter-spacing:0.1em;
}
@media print, screen and (min-width:768px) {.ttl03{font-size:2.5rem;}}
/**/
.ttl04{
	font-size:1.8rem;
	font-weight: bold;
	text-align:left;
	letter-spacing:0.1em;
	margin-bottom:20px;
}
@media print, screen and (min-width:768px) {.ttl04{font-size:2rem;}}
/**/
.ttl05{
	background-color:#00a0e9;
	border-left:15px solid #4d4d4d;
	font-size:1.8rem;
	color:#fff;
	letter-spacing:0.1em;
	line-height:1.3;
	padding:8px 0 8px 10px;
	text-align:left;
	margin-bottom:30px;
}
@media print, screen and (min-width:768px) {.ttl05{font-size:2.2rem;}}
/**/
.ttl06{
	background-color:#00a0e9;
	font-size:1.4rem;
	color:#fff;
	line-height:1.3;
	padding:5px 10px;
	text-align:left;
	margin-bottom:10px;
	font-weight: normal;
}
@media print, screen and (min-width:768px) {.ttl06{font-size:1.6rem;}}
/**/
.ttl07{
	font-size:1.4rem;
	color:#00a0e9;
	line-height:1.3;
	text-align:left;
	margin-bottom:10px;
}
.ttl07::before{
	content:"■";
}
@media print, screen and (min-width:768px) {.ttl07{font-size:1.6rem;}}
/**/
.ttl08{
	background-color:#4d4d4d;
	font-size:2rem;
	color:#fff;
	padding:10px 0;
	letter-spacing:0.1em;
}
@media print, screen and (min-width:768px) {.ttl08{font-size:2.8rem;}}
/**/


/*text
----------------------------------------------------------- */
.txt01{font-size:1.6rem;}
@media print, screen and (min-width:768px) {.txt01{font-size:1.8rem;}}

.txt02{
	font-size:1.4rem;
	line-height:2;
	text-align:left;
	letter-spacing:0.05em;
}
.txt03{
	font-size:1.4rem;
	line-height:1.75;
	text-align:left;
}

.tcB01{
	color:#00a0e9;
}
.tcB02{
	color:#2e3d8a;
}


/*btn
----------------------------------------------------------- */
.btn01{
	display:block;
	max-width:300px;
	border:1px solid #333;
	line-height:40px;
	background-color:#fff;
	text-align:center;
	text-decoration: none !important;
	font-size:1.4rem;
	position:relative;
	padding-left:10px;
	margin:0 auto;
	letter-spacing:0.1em;
}
.btn01::before{
	content:"";
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 20px;
	border-color: transparent transparent transparent #333;
	left:0;
	position:absolute;
	top:0;
}
.pageTopBtn{
	text-align:right;
	margin:20px 0;
}
.pageTopBtn a{
	color:#00a0e9 !important;
}