@charset "UTF-8";
/* CSS Document */
  	*{ margin:0; padding:0;}
  	body { margin:0 auto; padding:0; width:100%; min-width:320px; max-width: 100%; 
			font-size:14px;
			font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
			letter-spacing:0.5px;}
  	header{ position:relative;  margin:0; padding:10px 0; width:100%; height:40px; background: rgba(255,255,255,0.85); z-index:1000;}
	
	.wrap {position:relative; margin:0 auto; width: 940px;}
	
	h2{ margin:0 auto 30px; width:980px; text-align: center; }
	ul { margin:0; padding:0;}
	ul li { list-style:none;}
	
	a { color: #333; text-decoration:none;}

	p,div,th,td,dd,dt,inupt{box-sizing: border-box;}
	
	header div ul{ position: absolute; right:0; top:10px;}
	header h1 img{ width:150px; height:auto}
	header div ul li{ margin:0 10px 0; display:inline-block; -webkit-display:inline-block;}
	header div ul li img { margin-right:5px;}
  	
	main { margin:-70px 0 0 0;}
  	#FV { position: relative; height:700px; background-image:url("../images/img_main.jpg"); background-position: center top; background-repeat: no-repeat; background-size:cover;color:#fff}
  	#FV h2 { position: absolute; margin: -120px 0 0 -164px; top:50%; left:50%; width:340px;}
	#FV h2 img { width: 100%; height: auto;}
	main .content{ padding:70px 0; }
	main .bg_w{background:#fff;}
	main .bg_b{background:#f6f3ee;}
	
	.box-02 { height:660px;}
	.left{ position:absolute; height:120%; top:-70px; right:55%;}
	.left img {}
	.right{ margin:0 0 0 auto; width:53%;}
	.right h2 { width: 100%; text-align:left;}
	.right .l-height{ padding-left:0%}
	.txt-c { text-align: center;}
	.ma20 { margin-bottom:20px;}
	.l-height{ line-height:200%;}
	
	.clum2-l { position:relative; height: auto; margin-bottom: 30px;}
	.clum2-l > img { position:absolute; right:-20px; top:-20px;}
	.clum2-r { position:relative; height:320px;}
	.clum2-r > img { position:absolute; left:-20px; top:-20px;}
	.clum2-r div { position:absolute;right:0; top:40px;}
	.clum2-l h3,.clum2-r h3{ background: #f8f6f2; 
  padding: 1.5rem 1rem 1rem;
  margin-bottom: 1rem;
  border-bottom: 4px solid #4fb6d1;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 500;
  max-width: 450px; 
  position: relative;
  }
    .clum2-r h3 span{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 16px;}
	table { width:450px;}
	table td, table th { padding:5px; }
	table th{vertical-align: top; width:19%;}
	table th span{ display: inline-block; line-height: 1; padding:3px ; background:#97aeb6 ; color:#fff; font-size:14px; font-weight:normal;}
	table td p{ line-height:1.5;}
	table td p span{ font-size:12px;}
	
	dl { margin-bottom:10px;}
	dl dt, dl dd { display:inline-block; vertical-align: top;}
	dl dt { position:relative; margin-right:20px; width:140px; background: url("../images/icon_05.png") no-repeat; height:170px;}
	dl:last-child dt { background: url("../images/icon_06.png") no-repeat;}
	dl dt img{ position: absolute; top:60px; left:24%;}
	dl dd { width:780px; padding:10px 0 0; line-height:140%;}
	dl dd h4 { font-size:18px; margin-bottom:10px;}
	dl dd h4 span{ border-bottom:5px solid #ded4c4;}
	.small { font-size:12px;}
	
	.contact_box { margin: 30px auto; padding: 0 0 10px; width: 450px; text-align: center; background:#fff; border:4px solid #f6f3ee; border-radius:5px;}
	.contact_box h4 { margin:2px; height:35px; line-height:35px; font-size:14px ; font-weight:bold; background:#f6f3ee;}
	.contact_box a { display:block;}
	.contact_box a.tel img{ width:auto; height:40px;}
	.contact_box a.mail img{ width:auto; height:30px;}
	
	#formWrap { margin: 0 auto; padding:5px 5px 30px; width:70%; background:#f7f7f7;}
	#formWrap h4 { padding: 15px 0; font-size:16px; background:#eaeaea; text-align:center;}
	#formWrap h4 span { margin-top:10px; display:block; font-weight: normal; font-size:12px;}
	#formWrap h4 span b, .capt span{ color:#e20201}
	
	#formWrap .formTable { padding: 10px 20px 20px;}
	#formWrap .formTable p.ma10{ margin-bottom:10px;}
	#formWrap .formTable .capt { margin:30px 0 10px; padding-bottom:3px; font-weight: bold; font-size:16px; border-bottom:3px solid #eaeaea;}
	#formWrap .formTable .capt:first-child{ margin: 10px 0 10px;}
	#formWrap .formTable input[type="text"] ,#formWrap .formTable input[type="email"] ,#formWrap .formTable input[type="tel"] { padding:0 4px; width:95%; height:30px; font-size:16px;}
	#formWrap .formTable #zip { width:20%;}
	textarea { margin:0 auto; width: 95%; border:1px solid #ddd;}
	
	[id^="alrt"] { margin-top:5px;  color:#e20201; font-weight:bold}
	
	input[type="submit"],input[type="reset"],input[type="button"]{ width:150px; height:50px; line-height: 50px; border:0px; font-size:14px; border-radius:5px;}
	input[type="submit"]{ background: #2f8400;  color:#fff; margin-right:10px;}
	input[type="reset"],input[type="button"] { background:#ccc;}
	
	.bt { margin:40px auto 0; width:440px; text-align:center;}
	.bt li{ display: inline-block; }
	.bt li:first-child{ margin-right:10px;}
	[class^="bt-"] { position: relative; display:block; border-radius:5px; width: 210px ; height:60px; line-height:60px; color:#fff; font-size:16px; text-align:center;}
	[class^="bt-"] img { position:absolute; right:10px; top:22px;}
	.bt-01 { background-color:#42a7c8; }
	.bt-02 { background-color:#2f8400; }
	
	[class^="box-"] h2 img{}
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:60px;}
	.box-02 h2 img{ width: auto; height:110px;}
	
	
	footer { padding:20px 0; background:#f6f3ee; text-align: center; font-size:12px;}
	
@media screen and (min-width: 1200px) and (max-width: 1450px)   {
  	#FV { height:500px; }
  	#FV h2 { margin: -120px 0 0 -170px; top:50%; left:50%; width:320px; height:auto;}
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
	
  	header{ height:30px;}
	header h1 img{ width:130px; height:auto}
	main { margin-top: -30px;}
  	#FV { height:400px; }
  	#FV h2 { margin: -120px 0 0 -145px; top:50%; left:50%; width:290px; height:auto;}
	.wrap { width: 90% !important;}
	
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:50px;}
	h2 { width:90%; margin-bottom:30px;}
	
	
	.box-02 { height:660px;}
	.left{  width:160px; height:300px; top:-70px; right:-5%;}
	.left img { width: 100%; height:auto;}
	.right{ margin:0 0 0 auto; width:100%;}
	.right .l-height{ padding-left:0}
	
	
	.ma-t20{ padding-top:20px;}
	
	.clum2-l > img , .clum2-r > img { margin: 0 10% 20px; width:40%; height: auto; }
	.clum2-l > img  { position: absolute; right: -80px; top: 55px;}
	.clum2-r > img { position: absolute; left: -95px; top: 70px;}
	
	dl dt { position:relative; margin-right:20px; width:140px; background: url("../images/icon_05.png") no-repeat; height:170px;}
	dl:last-child dt { background: url("../images/icon_06.png") no-repeat;}
	dl dt img{ position: absolute; top:60px; left:24%;}
	dl dd { width:72%; padding:10px 0 0;}
	dl dd h4 { font-size:18px; margin-bottom:10px;}
	dl dd h4 span{ border-bottom:5px solid #ded4c4;}
}
@media screen and (max-width: 768px) {
	
  	header{ height:30px;}
	main { margin-top: -30px;}
	header h1 img{ width:130px; height:auto}
  	#FV { height:400px; }
  	#FV h2 {  margin: -90px 0 0 -95px; top:50%; left:50%; width:190px; height:auto;}
	.wrap { width: 90% !important;}
	
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:40px;}
	h2 { width:90%; margin-bottom:30px;}
	
	
	.box-02 { height:660px;}
	.left{  width:155px; height:300px; top:-70px; right:-5%;}
	.left img { width: 100%; height:auto;}
	.right{ margin:0 0 0 auto; width:100%;}
	.right h2 { text-align:left;}
	.right .l-height{ padding-left:2%}
	
	.ma-t20{ padding-top:20px;}
	
	.clum2-l,.clum2-r { margin:0 auto; height:auto;}
	.clum2-l{ margin-bottom: 30px; }
	.clum2-l div, .clum2-r div{ margin:0 auto;}
/*	.clum2-l h3,.clum2-r h3 { text-align:center;} */
	.clum2-l h3,.clum2-r h3{ padding: 1.25rem 1rem .95rem; border-bottom: 3px solid #4fb6d1; max-width: 100%; }
	.clum2-l > img ,.clum2-r > img,.clum2-r div { position:relative; max-width: 100%; width: 100%; height: auto; left: auto; right: auto; top: auto;}
	.clum2-l > img , .clum2-r > img { display: block; margin: 0 auto 20px; }
	table { margin: 0 auto 20px; max-width:100%; width: 100%;}
	table td, table th { padding:5px; }
	table th{vertical-align: top; width:19%;}
	
	dl dt { position:relative; margin-right:20px; width:140px; background: url("../images/icon_05.png") no-repeat; height:170px;}
	dl:last-child dt { background: url("../images/icon_06.png") no-repeat;}
	dl dt img{ position: absolute; top:60px; left:24%;}
	dl dd { width:60%; padding:10px 0 0;}
	
	
	#formWrap { width:100%; }
}

@media screen   and (max-width: 482px)  {
	
  	header{ height:25px;}
	header h1 img{ width:90px; height:auto}
	header div ul { display:none;}
	main { margin-top: -50px;}
	main .content { padding:40px 0;}
  	header{ background: none;}
  	#FV { height:260px; background-position: 0% 0;}
  	#FV h2 { margin: -60px 0 0 0; top:50%; left:10%; text-align:left; width:160px; height:auto;}
	.wrap { width:85% !important;}
	
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:32px;}
	.box-02 h2 img{ width: auto; height:60px;}
	
	h2 { width:90%; margin: 0 auto 30px;}
	
	.l-height { line-height: 150%; font-size:12px; text-align:left;}
	.ma-t20{ padding-top:20px;}
	
	.box-02 { height:auto;}
	.left{  width:100px; height:200px; top:-40px; right:-8%;}
	.left img { width: 100%; height:auto;}
	.right{ margin:0 0 0 auto; width:100%;}
	.right h2 { text-align:left;}
	.right .l-height{ padding-left:2%}
	
	
	.clum2-l,.clum2-r { margin:0 auto; height:auto;}
	.clum2-l{ margin-bottom: 30px; }
	.clum2-l div, .clum2-r div{ margin:0 auto;}
/*	.clum2-l h3,.clum2-r h3 { text-align:center;} */
	.clum2-l h3,.clum2-r h3{ padding: 1.25rem 1rem .95rem; border-bottom: 3px solid #4fb6d1; max-width: 100%; }


	table td, table th { padding:5px; }
	table th{ width:25%; }
	table th span{ font-size:12px;}
	table td p{ font-size:12px;}
	table td p span{ font-size:10px;}
	
	.box-04 h2 { margin:0 auto 20px;}
	dl dt { margin-right:10px; width:90px; background: url("../images/icon_05.png") no-repeat; background-size: contain; height:150px;}
	dl:last-child { margin-bottom:0;}
	dl:last-child dt {  background-size: contain;}
	dl dt img{ position: absolute; top:40px; left:18%; width:60px; height:auto;}
	dl dd { width:70%; font-size:12px;}
	dl dd h4 { font-size:15px; line-height:140%;}
	
	.bt { width:85%;}
	.bt li{ margin-bottom: 10px; display: block;  width: 100% ;}
	[class^="bt-"] { width:100% ; height:50px; line-height:50px; font-size:14px;}
	[class^="bt-"] img { right:10px; top:18px;}
	
	.small { margin-top:5px; font-size: 10px;}
	
	
	.contact_box { width: 90%;}
	.contact_box a.tel img{ width:auto; height:30px;}
	.contact_box a.mail img{ width:auto; height:25px;}
	
	#formWrap { width:90%; }
	input[type="submit"],input[type="reset"],input[type="button"]{ width:120px; }
}

@media screen  and (min-width: 455px) and (max-width: 474px)  {
	
  	#FV { height:260px; background-position: 0% 0;}
}

@media screen  and (min-width: 325px) and (max-width: 456px)  {
	
	
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:29px;}
	.box-02 h2 img{ width: auto; height:58px;}
	dl dd { width:68%;}
	
  	#FV { height:260px; background-position: 10% 0;}
}
@media screen and (min-width: 320px)  and (max-width: 324px)  {
	
  	#FV { background-position: 15% 0;}
	.box-01 h2 img,.box-03 h2 img,.box-04 h2 img,.box-05 h2 img{ width: auto; height:26px;}
	.box-02 h2 img{ width: auto; height:58px;}
	dl dd { width:60%;}
}