@charset "utf-8";


/*--module[部品類]--*/


/*====================================================================
  ボックス関連編
====================================================================*/

/*--2カラムボックス左70%（テキスト）右30%（画像）--*/
.ptn2Clm{width:90%;margin:1em auto;display:block;overflow:hidden;}
.ptn2Clm ul{display:block;width:95%;padding:10px;background:url(../images/bg_ptn2.png);}
.ptn2Clm ul li{float:left;width:70%;}
.ptn2Clm ul li.rightClm{float:left;width:26%;text-align:center;}
.ptn2Clm ul li div{text-align:left;font-size:90%;}
.ptn2Clm ul li div span{font-weight:bold;}


/*--(1)2カラムボックス左右50％・右が画像(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeft50{float:left;width:48%;}
.twoBoxRight50{float:right;width:48%;border:1px solid #889;display:block;padding:4px;}
@media screen and  (max-width:480px){
.twoBoxLeft50{float:none;width:90%;margin:4px auto;}
.twoBoxRight50{float:none;width:90%;margin:0 auto;}
}


/*--(2)2カラムボックス左60％右（画像）40％(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeft60{float:left;width:58%;}
.twoBoxRight40{float:right;width:38%;border:1px solid #889;display:block;padding:4px;}
@media screen and  (max-width:480px){
.twoBoxLeft60{float:none;width:90%;margin:4px auto;}
.twoBoxRight40{float:none;width:90%;margin:0 auto;}
}

/*--(3)2カラムボックス左70％右（画像）30％(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeft70{float:left;width:68%;}
.twoBoxRight30{float:right;width:28%;border:1px solid #889;display:block;padding:4px;}
@media screen and  (max-width:480px){
.twoBoxLeft70{float:none;width:90%;margin:4px auto;}
.twoBoxRight30{float:none;width:90%;margin:0 auto;}
}


/*--(4)2カラムボックス左右50％・左が画像(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeftImg50{float:left;width:48%;border:1px solid #889;display:block;padding:4px;}
.twoBoxRightTxt50{float:right;width:48%;}
@media screen and  (max-width:480px){
.twoBoxLeftImg50{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt50{float:none;width:90%;margin:4px auto;}
}

/*--(5)2カラムボックス左60%右40％・左が画像(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeftImg60{float:left;width:58%;border:1px solid #889;display:block;padding:4px;}
.twoBoxRightTxt40{float:right;width:38%;}
@media screen and  (max-width:480px){
.twoBoxLeftImg60{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt40{float:none;width:90%;margin:4px auto;}
}

/*--(6)2カラムボックス左30%右70％・左が画像(枠付き)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxLeftImg30{float:left;width:28%;border:1px solid #889;display:block;padding:4px;}
.twoBoxRightTxt70{float:right;width:68%;}
@media screen and  (max-width:480px){
.twoBoxLeftImg30{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt70{float:none;width:90%;margin:4px auto;}
}

/*--(7)&(8) 2カラムボックス左右50％(枠付き/キャプション付)--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxWrapper50{float:left;width:48%;}
.twoBoxLeftImg{border:1px solid #889;display:block;padding:4px;}
.twoBoxRightTxt50{float:right;width:48%;}
p.cap{width:80%;margin:8px auto;text-align:center;color:#fff;background:#4169e1;}
@media screen and  (max-width:480px){
.twoBoxWrapper50{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt50{float:none;width:90%;margin:4px auto;}
}


/*--(9) 3カラムボックス 均等--*/
.twoBox{width:96%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxWrapper66{float:left;width:64%;}
.twoBoxInnerLeft33{float:left;width:46%;border:1px solid #889;display:block;padding:4px;}
.twoBoxInnerRight33{float:right;width:46%;border:1px solid #889;float:right;padding:4px;}
.twoBoxRightTxt34{float:right;width:32%;}
p.cap{width:80%;margin:8px auto;text-align:center;color:#fff;background:#4169e1;}
@media screen and  (max-width:480px){
.twoBoxWrapper66{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt34{float:none;width:90%;margin:4px auto;}
.twoBoxInnerLeft33{float:none;width:90%;margin:0 auto 8px;}
.twoBoxInnerRight33{float:none;width:90%;margin:0 auto 4px;}
}


/*--(10)左右50%の画像2枚--*/
.twoBox{width:100%;margin:10px auto;padding:4px;font-size:90%;}
.twoBoxPhoto50{float:left;width:49%; margin: 3px;}
@media screen and  (max-width:640px){
.twoBoxPhoto50{float:none;width:90%;margin:10px auto;}
}


/*--(11)2カラムボックス左40%右60％・左が画像(枠付き)--*/
.twoBox_02{
	width:90%;
	margin:50px auto;
	padding:4px;
	font-size:90%;
}

/*--(12)グリッドレイアウト　2列--*/

.twoGrid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 15px;
}
.twoGridPhoto50{
	width:100%;
	margin-bottom: 15px;

}


/*--(12)グリッドレイアウト　3列--*/

.threeGrid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
	padding: 0 10px;
}
.threeGridPhoto50{
	width:100%;
	margin-bottom: 15px;

}

@media screen and  (max-width:1023px){
.threeGrid{
	grid-template-columns: repeat(2, 1fr);
	column-gap: 15px;
}

}
@media screen and  (max-width:768px){
.threeGrid{
	grid-template-columns: repeat(2, 1fr);
	column-gap: 10px;
}

}




.twoBoxLeftImg40{float:left;width:43%;display:block;padding:4px;}
.twoBoxRightTxt60{
	float:right;
	width:53%;
 	color: #666;
}
.twoBoxRightDai60{
	font-family:Calibri;
	font-style:italic;
	padding: 0 0 20px 10px;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #aaa;
	color: #777;
}

@media screen and  (max-width:640px){
.twoBoxLeftImg40,
.twoBoxRightTxt60{float:none;width:100%;margin:10px auto;}

.twoBoxRightDai60{
	padding: 0 0 10px 10px;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #aaa;
	color: #777;
}


}


.twoBoxRightTxt60 h3.twoBoxRightDai60{
	font-size:1.2rem;
	color: #888;
}

.twoBoxRightTxtMore60 {
	font-family:Calibri;
	font-style:italic;
	color: #777;
}

.yazirusi {
  display: flex;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
   -webkit-align-items: flex-end;
   align-items: flex-end;
} 

.yazirusi::after {
  content: '';
  width: 100px;
  height: 6px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
  color: #aaa;
  margin-bottom: 9px;
  margin-left: 10px;
}




.twoBoxRightTxtP60{
	font-family:游明朝;
	padding: 0 0 20px 10px;
}
@media screen and  (max-width:480px){ 
.twoBoxLeftImg40{float:none;width:90%;margin:0 auto;}
.twoBoxRightTxt60{float:none;width:90%;margin:4px auto;}
}


/*====================================================================
  右サイド専門パーツ
====================================================================*/

.sideOutline{width:96%;margin:18px auto 0 auto;background:#f6f6f6;padding:2px;border:1px dotted #ccc;}
.sideInline{background:#f1f1f1;border:1px solid #f3f3f3;}
.sideNavCase{width:90%;margin:1em auto;border:1px dotted #ccc;padding:2px;background:#fff;}

.sideNavCase p.qaTitle{margin-bottom:2px;padding:4px 0;line-height:30px;font-size:15px;font-weight:bold;color:#fff;text-align:center;background:#06F;}
.sideNavCase p.qaBody{height:34px;line-height:34px;margin-bottom:4px;margin-left:4px;font-size:13px;font-weight:bold;padding-left:1em;border-left:4px solid #393;background:#D8F7FE;}
.sideNavCase p.qaBody:hover{height:34px;line-height:34px;background:#99ECFD;}
.sideNavCase p.qaBody a:hover{color:#fff;text-decoration:none;}
.sideNavCase p.generalNav{border:1px solid #0CC;background:#C1FFC1;font-size:14px;font-weight:bold;padding-left:6px;}
.sideNavCase p.generalNav:hover{background:#060;color:#fff;}
.sideNavCase p.generalNav a:hover{text-decoration:none;color:#fff;}
.sideNavCase dl dt{height:26px;line-height:26px;padding-left:6px;color:#fff;background:#C30;font-size:14px;font-weight:bold;color:fff;}
.sideNavCase dl dd{margin-left:6px;padding-left:1.6em;margin-top:2px;border-left:4px solid #C30;font-size:14px;font-weight:bold;color:#000;margin-bottom:2px;background:#FC9}
.sideNavCase dl dd a:hover{text-decoration:none;}
.sideNavCase dl dd:hover{background:#F66;}

/*====================================================================
  テキスト装飾関連編
====================================================================*/

.txtMain{width:100%;margin-top:20px;}
.txtMain h2{height:80px;line-height:80px;font-size:36px;color:#000;font-weight:bold;text-align:left;padding-left:10px;background:#fff;}
.txtMainBase{width:100%;height:auto;}
.txtMain h2.bkBase1{font-size:28px;background:#f1f1f1;}
.txtMain h2.bkBase2{padding-left:20px;font-size:28px;color:#000;border:1px solid #e3e3e3;}
.txtMain h2.bkBase3{padding-left:20px;font-size:28px;color:#000;background:#f6f6f6;border:1px solid #e3e3e3;}
.txtMain h2.bkBase4{padding-left:20px;font-size:28px;background:url(../images/bkBase_bg1.gif);border:1px solid #e3e3e3;}
.txtMain h2.bkBase5{padding-left:20px;font-size:28px;background:url(../images/bkBase_bg2.gif) right bottom no-repeat;border:1px solid #c5ebff;}
.txtMain h2.bkBase6{padding-left:20px;font-size:28px;background:url(../images/bkBase_bg3.gif) repeat-x;border:1px solid #c5ebff;}
.txtMain h2.bkBase7{padding-left:20px;font-size:28px;background:url(../images/bkBase_bg4.gif) repeat-x;border:1px solid #f1f1f1;}
.txtMain h2.bkBase8{padding-left:20px;font-size:28px;color:#000;border-left:20px solid #008930;}
.txtMain h2.bkBase9{height:50px;line-height:50px;padding-left:20px;font-size:20px;color:#000;border-left:18px solid #008930;}
.txtMain h2.bkBase10{height:50px;line-height:50px;padding-left:20px;font-size:20px;color:#000;border-left:18px solid #e33715;}
.txtMain h2.bkBase11{height:50px;line-height:50px;padding-left:20px;font-size:20px;color:#000;border-left:18px solid #2c88e6;}
.txtMainbr{width:100%:margin-top:20px;border-bottom:2px dotted #cfcfcf;background:url(../images/h3bg.gif) repeat-x;}
.txtMainbr h2{height:56px;line-height:70px;border-bottom:1px solid #f1f1f1;margin-bottom:2px;padding-bottom:0;padding-left:3em;background:url(../images/icon01.gif) 0 0 no-repeat;}
.txtMainbr h2.mhead1{background:url(../images/h3bg2.gif) 0 15px no-repeat;}





.txtMain h3{height:40px;line-height:40px;padding-left:30px;font-size:16px;font-weight:bold;color:#000;background:url(../images/bgHead1.gif) left no-repeat;}
.txtMain h3.bkBase12{background:url(../images/bgHead2.gif) left no-repeat;}
.txtMain h3.bkBase13{background:url(../images/bgHead3.gif) left no-repeat;}

.txtMain h4{height:36px;line-height:36px;padding-left:18px;font-size:15px;color:#000;font-weight:bold;border-bottom:1px solid #c1c1c1;}
.txtMain h4.bkBase14{width:40%;color:#fff;background:#2c88e6;border:1px solid #2c88e6;}
.txtMain h4.bkBase15{width:30%;color:#fff;background:#2c88e6;border:1px solid #2c88e6;}




@media screen and  (max-width:480px){
.txtMain h2{height:60px;line-height:60px;font-size:20px;}
.txtMain h2.bkBase1,
.txtMain h2.bkBase2,
.txtMain h2.bkBase3,
.txtMain h2.bkBase4,
.txtMain h2.bkBase5,
.txtMain h2.bkBase6,
.txtMain h2.bkBase7,
.txtMain h2.bkBase8,
.txtMain h2.bkBase9{font-size:20px;}
.txtMainbr h2, .txtMainbr h2.mhead1{font-size:16px;background:#f1f1f1;padding-left:10px;line-height:56px;}


.txtMain h4{width:90%;margin:0 auto;}
.txtMain h4.bkBase14, .txtMain h4.bkBase15{width:90%;margin:0 auto;}

}











/*========================================================
   特定ページ専用
=======================================================*/
/*-----------------
 ■よくあるご質問
------------------*/

.questBox{width:90%;margin:1em auto;border:4px dotted #aadafb;overflow:hidden;}
.questBox p.questMark{margin:0.8em 1.4em 0.8em 0.8em;float:left;}
.questBox .questTxt{margin:0.8em 1em 0.8em 0.8em;overflow:hidden;}
.questBox .questTxt h3{font-size:15px;font-weight:bold;color:#0760ab;}
.questBox p.questLead{font-size:14px;font-weight:bold;color:#555;}
.answerBox{width:90%;margin:2em auto;border:4px dotted #e2e2e2;overflow:hidden;}
.answerBox p.answerMark{margin:0.8em 1.4em 0.8em 0.8em;float:left;}
.answerBox .answerTxt{margin:0.8em 1em 0.8em 0.8em;overflow:hidden;}
.answerBox p.answerLead{padding-top:8px;line-height:1.9;font-size:13px;color:#333;}
.answerBox .answerTxt h4{font-size:14px;font-weight:bold;border-bottom:1px solid #ccc;}
.answerBox .answerTxt img{float:right;margin:6px 4px 2px 10px;}
.rtMore{width:90%;margin:0 auto;}
.rtMore p.rtFaq{width:140px;height:30px;line-height:30px;text-align:center;color:#fff;font-weight:bold;font-size:15px;letter-spacing:5px;background:#0760ab;}
.rtMore .rtTxt{display:block;font-size:13px;}
.rtMore .rtTxt ul li{padding-left:20px;list-style:none;display:block;background:url(../images/marktype01.gif) 5px 5px no-repeat;}
.rtMore .rtTxt ul li a{text-decoration:none;}
.introExp{width:90%;margin:1em auto;}
.introExp p.expTitle{width:140px;height:30px;line-height:30px;text-align:center;color:#fff;font-weight:bold;font-size:15px;letter-spacing:5px;background:#e7446e;}
.introExp .expTxt{display:block;font-size:13px;}
.introExp .expTxt ul li{padding-left:20px;list-style:none;display:block;background:url(../images/marktype01.gif) 5px 5px no-repeat;}
.introExp .expTxt ul li a{text-decoration:none;}
.spformBox{width:90%;margin:1em auto;display:block;text-align:center;}

/*========================================================
   リンクのカーソルONのときに画像を透過する
=======================================================*/
a .hover_img1{transition:all 0.5s ease;} /*0.5秒かけて要素を変化させる*/
a:hover .hover_img1{
	opacity: 0.7;/*要素の透明度を指定*/
	filter: alpha(opacity=70); /*ie6、7の透明度指定*/
   -ms-filter: "alpha(opacity=70)";/*ie8の透明度指定*/
    }
/*========================================================
   上下左右余白オプション　class内の半角スペース空けて追加
=======================================================*/

/*--マージントップに余白追加--*/
.mt0{margin-top:0px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mt200{margin-top:200px;}

.mtp5{margin-top:5%;}
.mtp10{margin-top:10%;}
.mtp15{margin-top:15%;}
.mtp20{margin-top:20%;}
.mtp30{margin-top:30%;}
.mtp40{margin-top:40%;}
.mtp50{margin-top:50%;}
.mtp60{margin-top:60%;}
.mtp70{margin-top:70%;}
.mtp80{margin-top:80%;}
.mtp90{margin-top:90%;}
.mtp100{margin-top:100%;}



/*--マージンボトムに余白追加--*/
.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}


.mbp5{margin-bottom:5%;}
.mbp10{margin-bottom:10%;}
.mbp15{margin-bottom:15%;}
.mbp20{margin-bottom:20%;}
.mbp30{margin-bottom:30%;}
.mbp40{margin-bottom:40%;}
.mbp50{margin-bottom:50%;}
.mbp60{margin-bottom:60%;}
.mbp70{margin-bottom:70%;}
.mbp80{margin-bottom:80%;}
.mbp90{margin-bottom:90%;}
.mbp100{margin-bottom:100%;}


/*--高さ調整に追加--*/
.hgvh80{height: 80vh;}
.hgvh90{height: 90vh;}
.hgvh100{height: 100vh;}


.mri10{margin-right:10px;}

.pale10{padding-left: 10px}

/*========================================================
   ページトップに戻るボタンの設置
=======================================================*/


#pageTop{
	background:#aaa;
	filter:alpha(opacity=85);
    -moz-opacity:0.85;
    -khtml-opacity: 0.85;
    opacity:0.85;
	border-radius:5px;
	color:#fff;
	text-align:center;
	padding:5px;
	position:fixed;
	bottom:20px;
	right:20px;
	}
#pageTop:hover{
	background:#EEE;
	text-decoration:none;
	color:#333;
	}



	#pageTopToiawase{
		position: fixed;
		bottom:20px;
		right:20px;
		width: 50px;
	  height: 50px;
	  background: #888;
	  border-radius: 50%;
		-webkit-transition: all 0.8s;
		-moz-transition: all 0.8s;
		-ms-transition: all 0.8s;
		-o-transition: all 0.8s;
		transition: all 0.8s;
		}

		#pageTopToiawase::before {
			content: "";
		  margin: auto;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  width: 12px;
		  height: 12px;
		  border-top: 3px solid #fbf6e8;
		  border-right: 3px solid #fbf6e8;
			-webkit-transform: translate(-50%, -40%) rotate(-45deg);
			-moz-transform: translate(-50%, -40%) rotate(-45deg);
			transform: translate(-50%, -40%) rotate(-45deg);
			-webkit-transition: all 0.8s;
			-moz-transition: all 0.8s;
			-ms-transition: all 0.8s;
			-o-transition: all 0.8s;
			transition: all 0.8s;
	 }

	#pageTopToiawase:hover{
		background: #fbf6e8;
		border-right:#888;
		-webkit-transition: all 0.8s;
	  -moz-transition: all 0.8s;
	  -ms-transition: all 0.8s;
	  -o-transition: all 0.8s;
	  transition: all 0.8s;
		}

		#pageTopToiawase:hover:before{
			 border-top: 3px solid #888;
			border-right: 3px solid #888;
			-webkit-transition: all 0.8s;
		  -moz-transition: all 0.8s;
		  -ms-transition: all 0.8s;
		  -o-transition: all 0.8s;
		  transition: all 0.8s;
			}



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

#pageTopToiawase{
	bottom:110px;
	}

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

#pageTopToiawase{
bottom:90px;
}

}