@charset "utf-8";

/*******************************************************************************
 *      
 *  Web Site Title  : 
 *  File         : style.css
 *
 *******************************************************************************/



* {
	margin: 0;
}
html, body {
	height: 100%;
}

html{
font-size: calc(100% + 0.25vw);
font-family: "メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.6; font-size: 16px;
text-align:center; }
 


body { background-color:#F9FBFB; color: #333; }

a{ color: #347DC9; }

#pagetop{ height: 0; line-height:0;display: none; }



/*---テンプレート--------------------------------------------------------------*/

{ background-image: none;}

#logo{ position:absolute;top: 0; left:0;   z-index:10; }
#logo img{ margin:3vw; } 
	
.contents{ margin: 0 auto; width: 90%; max-width: 1400px; padding-top:3vw;position:relative; text-align:left;  }

.contents section{}
	




/*//========汎用スタイル================================================================================/*/



/*---配置・レイアウト-----------------------------------------------*/

.fl-l{ float: left;}
.fl-r{ float:right;}
.centering{ width: 100%; text-align:center;}
.cb{ clear:both;} 
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/*--要素を縦にセンタリング--*/
.tateCenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.child {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}


*/


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


.only-sp{ display: none;}


/*---表・リスト-----------------------------------------------*/
 
/*--DL1-----*/

dl.dl1{ font-size: 16px; margin: 1em 0; overflow:hidden;}

dl.dl1 dt, dl.dl1 dd{ margin-bottom: 0.5em; padding: 0.5em 0;}
dl.dl1 dt{ width: 20%; float: left; background-color:#6DDBB2; color: rgba(0,115,150,1.00); }
dl.dl1 dt p{ width: 100%; text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

dl.dl1 dd{ width: 75%; float:right; background-color: #fff; padding: 1em 2%;}


/*--UL1-----*/

ul.ul1{ margin: 0.5em 0 0.5em 2em;}
ul.ul1 li{ list-style-type: disc}



/*---フォント------------------*/

.font1{ font-family: 'Roboto Condensed', sans-serif;}
.font2{ font-family: 'Fjalla One', sans-serif;}
.font3{font-family: 'Raleway', sans-serif;}
.font3Bl{
    font-family: "Raleway script=all rev=1","Adobe Blank";
    font-weight: 700;
    font-style: normal;
}

.font4{ font-family: 'Crimson Text', serif;}




/*---文字サイズ------------------*/

.smaller1{ font-size: 0.95em;} 
.smaller2{ font-size: 0.9em;} 
.smaller3{  font-size: 0.85em;}  
.smaller4{  font-size: 0.8em;}  
.smaller5{  font-size: 0.75em;}
.smaller6{  font-size: 0.7em;}  

.bigger1{ font-size: 1.05em;}
.bigger2{font-size: 1.15em;}
.bigger3{ font-size: 1.25em;}
.bigger4{ font-size: 1.35em;}
.bigger5{ font-size: 1.45em;}
.bigger6{ font-size: 1.55em;}
.bigger7{ font-size: 1.65em;}
.bigger8{ font-size: 1.75em;}
.bigger9{ font-size: 1.85em;}


/*---装飾・スタイル-----------------*/

.strong1{ font-weight: bold; }

.strong2{ font-weight: bold; }



/*---カラースキーム-----*/

.clrW{ color: #fff;}

.clr1{ color:#FF0105;}
.clr2{ color: #0080CC;}

.bgClr1{ }




/*---リンクボタン---------*/

a.linkBtn1{ display:inline-block;background-color:#006699; padding: 0 6em; position:relative; border-radius: 40px; line-height:3;}
a.linkBtn1:hover{ background-color: #0099cc; }

a.linkBtn1 img{ position:absolute; right: 1em; top: 1em; height: 1em; width:auto;}

.hoverBgImg1{  background-size: auto 100%; margin-top: 7em; transition: all 0.1s linear; -webkit-transition: all 0.1s linear; }
.hoverBgImg1:hover{  background-size: auto 115%; margin-top: 7em;}


.hoverImg2{
	-webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1); 

 -webkit-transition:all 0.2s;
  -moz-transition:all 0.2s;
  -ms-transition:all 0.2s;
  -o-transition:all 0.2s;
  transition:all 0.2s;
}

.hoverImg2:hover{  
	-webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1); 
  }
  
a.cover{
	width: 100%;
	height:100%;
	position:absolute;
	top: 0;
	left:0;
	text-indent: -9999px;
	z-index: 100;

	}



.box1{ border:double  3px #0F657B; color: #0F657B; background-color: #fff; padding: 1vw 2vw; margin: 2vw 0;}


/*===footer================================================================*/

footer{  clear: both; background:url(../img/pattern1.gif) repeat;   color: #C0C0C0; }



/*-コピーライト*/
footer p.copyright{ padding:0.5em auto;width: 100%; font-size: 15px; line-height: 2;color:#ccc; font-family: 'Crimson Text', serif; letter-spacing: 0.15em;}





/*===共通スタイル
===========================================================================================================*/



h1{ text-align:center; margin: 3vw auto 5vw auto; line-height:1.2; line-height: 1.7; }

h1 p{ display: inline-block; font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; 
 font-size:42px; font-size: 2.5vw; font-weight: 700; letter-spacing: 0.25em; border-bottom: solid 1px #ccc;}
 
h1 span{ display: block;font-family: 'Cormorant SC', serif;  font-weight: 400; font-size: 24px; font-size: 1.75vw;}




/*===資料請求・お問い合わせ=======================================================================*/

section#otoiawase{ margin:0 5%; width:90%; }


section#otoiawase form{ }

img.step{ margin: 2em auto 1em auto;} 

fieldset{ margin: 2em 0 ; text-align:left; padding: 0 2em 2em 2em; line-height: 1.8; background-color:#fff;}

fieldset legend{ font-size: 18px; font-weight:bold; display:inline-block; padding: 0 1em;}

fieldset label{}

section#otoiawase form dl{ overflow:hidden;}
section#otoiawase form dt, section#otoiawase form dd{ margin-top: 2em;}
section#otoiawase form dt{ width: 25%; float:left; clear:both;}
section#otoiawase form dd{ width:70%; float:right; }


input,textarea, select{ margin: 0 0.5em 0.5em 0; color: #313131; font-size: 15px; background-color:#EDEDED; border: 1px solid #ccc;}
input:focus, textarea:focus, select:focus{
	background-color:  #fff;
}



/*--フォームボタン--*/

.formBtn{ text-align:center; position:relative; margin-bottom: 40px}

.formBtn input{
	margin: 2em ;
	width: 140px;
	border: none;
	border-radius: 4px;
	background-color: #006699;
	font-size: 18px; 
	color: #fff;
	padding: 12px 24px;

}
.formBtn input:hover{
	background-color: #148B9C;
}
.formBtn input:focus{
	background-color: #0099CC;
}


fieldset .w1{ width: 100px;}
fieldset .w2{ width: 200px;}
fieldset .w3{ width: 400px;}
fieldset .w4{ width: 95%;}



#ssl-mark{ position:absolute; right:0; top: 0 }


.errm{ max-width: 800px;margin: 60px auto; color:#FD0808; line-height: 2; }

/*-送信完了-*/
.send{margin: 5vw auto; text-align:center;}
.send p{font-family: 'Roboto Condensed', sans-serif; font-size: 40px; color: #999;}


.send a.linkBtn1{ margin: 2em 0; color: #fff;}






/*　　タブレット端末用CSS
=======================================================================================================================*/
@media screen and (max-width:959px) {



	/*---テンプレート--------------------------------------------------------------*/
	
	#logo{ width:120px;  height:130px;  z-index:10;}
	#logo img{ margin-top:2vw; width: 10vw; height:auto;} 
		
	.contents{ margin: 0 auto; width: 100%; max-width:959px;  }
	
	
	h1{ padding: 0 0 0 8vw; margin: 0 0 6vw 0; line-height:1.3 }
	h1 p{ font-size:4vw;  letter-spacing: 0;}
	 
	h1 span{  font-size: 3vw; }		
	

	
	/*===資料請求・お問い合わせ=======================================================================*/

	img.step{ width:100%; height:auto;}
	
	fieldset{  line-height: 1.6;}
	

	
	section#otoiawase form dl{ overflow:hidden;}
	
	section#otoiawase form dt, section#otoiawase form dd{ margin-top: 2em;}
	section#otoiawase form dt{ width: 100%; float:none; border-left: solid 6px #66CCCC; padding-left: 0.5em ; }
	section#otoiawase form dd{ width:96%; padding: 0.5em 2%; float:none; margin-top: 1em; background-color:#F3F3F3;  }
	


	input,textarea, select{ background-color:#fff;}
	input:focus, textarea:focus, select:focus{ background-color:#DBF4FC;
	}


	
	
}


		/*　　スマホ用CSS
		=======================================================================================================================*/
		
		@media screen and (max-width:599px) {
			
			
			.only-sp{ display: block;}
			.only-pc{ display: none!important;}
			
			

			/*---テンプレート--------------------------------------------------------------*/
			
			#logo{ width:24vw;  height:26vw;  z-index:10;}
			#logo img{ margin-top:2vw; width: 14vw; height:auto;} 
				
			.contents{ margin: 0 auto; width: 100%; max-width:599px; font-size: 14px; }
			
			
			h1{ padding: 0 0 0 28vw; margin: 0 0 10vw 0;text-align:left; }
			h1 p{  font-size:5vw;  }
			 
			h1 span{  font-size: 5vw; }			
	
	
					
		/*===資料請求・お問い合わせ=======================================================================*/
		
		section#otoiawase{ margin: 0 3%; width: 94%;}
	
		img.step{ display: none;}
		
		
		fieldset{ margin: 1em 0 ; padding: 0 1vw 1em 1vw; line-height: 1.4; border: none;}
		
		fieldset legend{ font-size: 4.55vw;  padding: 1em 0 0 0;}
		
		fieldset label{}
				
	
		section#otoiawase form dt, section#otoiawase form dd{ margin-top: 1.5em;}
		section#otoiawase form dt{ width: 100%; float:none; border-left: solid 6px #66CCCC; padding-left: 0.5em ; }
		section#otoiawase form dd{ width:96%; padding: 0.5em 2%; float:none; margin-top: 0.5em; background-color:#F3F3F3;  }
		
		

		fieldset .w1{ width: 25vw;}
		fieldset .w2{ width: 50vw;}
		fieldset .w3{ width: 85%;}
		fieldset .w4{ width: 98%;}
		


		/*--フォームボタン--*/
		
		.formBtn{ clear: both;margin-bottom:2em; padding: 100px 0 0  0; position:relative;}
		
		.formBtn input{
			margin: 1em  ;
			width: 35vw;
			font-size: 5vw; 
			color: #fff;
			padding: 0.5em 1em;
		
		}
		.formBtn input:hover{
			background-color: #148B9C;
		}
		.formBtn input:focus{
			background-color: #0099CC;
		}


		#ssl-mark{ position:absolute; right:0; top: 0 }


		/*-送信完了-*/
		.send img{ width:50%; height:auto;}		
		
		}