@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);

/*
------------------

 .clearfix

------------------
*/
.clearfix {
	zoom:1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/*
------------------

 Lib.

------------------
*/
.btn:hover{
	opacity:0.75;
	cursor:pointer;
}
.btn2{
    display: block;
}
.btn2:hover{
    opacity:0.75;
    cursor:pointer; 
}
.fl{
	float:left;
}
.fr{
	float:right;
}
.round{
	border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}
.round3{
	border-radius: 3px;        /* CSS3草案 */
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 3px;   /* Firefox用 */
}
.mt10{ margin-top:10px!important; }
.mt30{ margin-top:30px!important; }
.mt40{ margin-top:40px!important; }
.mt50{ margin-top:50px!important; }


/* グラデーション */

.grad-blue{
	color:#fff;
	background: #04278d;
	background: -webkit-gradient(radial, 50% 52%, 0, 50% 52%, 120, color-stop(0.97, #04278d), color-stop(0.00, #005b96));
	background: -webkit-radial-gradient(50% 52%, circle, #005b96 0%, #04278d 97%);
	background: -moz-radial-gradient(50% 52%, circle, #005b96 0%, #04278d 97%);
	background: -o-radial-gradient(50% 52%, circle, #005b96 0%, #04278d 97%);
	background: -ms-radial-gradient(50% 52%, circle, #005b96 0%, #04278d 97%);
}
.grad-gray{
	color:#fff;
	background: #919191;
	background: -webkit-gradient(radial, 50% 52%, 0, 50% 52%, 120, color-stop(0.97, #919191), color-stop(0.00, #b2b2b2));
	background: -webkit-radial-gradient(50% 52%, circle, #b2b2b2 0%, #919191 97%);
	background: -moz-radial-gradient(50% 52%, circle, #b2b2b2 0%, #919191 97%);
	background: -o-radial-gradient(50% 52%, circle, #b2b2b2 0%, #919191 97%);
	background: -ms-radial-gradient(50% 52%, circle, #b2b2b2 0%, #919191 97%);
}
.grad-green{
	color:#fff;
	background: #2aaea6;
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 120, color-stop(0.88, #2aaea6), color-stop(0.00, #2aaecd));
	background: -webkit-radial-gradient(50% 50%, circle, #2aaecd 0%, #2aaea6 88%);
	background: -moz-radial-gradient(50% 50%, circle, #2aaecd 0%, #2aaea6 88%);
	background: -o-radial-gradient(50% 50%, circle, #2aaecd 0%, #2aaea6 88%);
	background: -ms-radial-gradient(50% 50%, circle, #2aaecd 0%, #2aaea6 88%);
}
.grad-gold{
	color:#fff;
	background: #988575;
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 120, color-stop(0.88, #988575), color-stop(0.00, #c6b198));
	background: -webkit-radial-gradient(50% 50%, circle, #c6b198 0%, #988575 88%);
	background: -moz-radial-gradient(50% 50%, circle, #c6b198 0%, #988575 88%);
	background: -o-radial-gradient(50% 50%, circle, #c6b198 0%, #988575 88%);
	background: -ms-radial-gradient(50% 50%, circle, #c6b198 0%, #988575 88%);
}
.grad-lightgreen{
	color:#fff;
	background: #39b44a;
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 120, color-stop(0.88, #39b44a), color-stop(0.00, #88b917));
	background: -webkit-radial-gradient(50% 50%, circle, #88b917 0%, #39b44a 88%);
	background: -moz-radial-gradient(50% 50%, circle, #88b917 0%, #39b44a 88%);
	background: -o-radial-gradient(50% 50%, circle, #88b917 0%, #39b44a 88%);
	background: -ms-radial-gradient(50% 50%, circle, #88b917 0%, #39b44a 88%);
}

/* ボタン用のカラー設定 */
.grad-blue a, .grad-gray a, .grad-green a, .grad-gold a{ color:#fff; }
.grad-blue a:after{ border-left-color:#04278d !important; }
.grad-gray a:after{ border-left-color:#919191 !important; }
.grad-green a:after{ border-left-color:#2aaea6 !important; }
.grad-gold a:after{ border-left-color:#988575 !important; }
.grad-lightgreen a:after{ border-left-color:#39b44a !important; }

/* 大きなプレート状のボタン */
.btn-plate{ overflow: hidden; max-width:400px; width:100%; height: auto; margin: 0 auto; padding: 13px 0; margin-bottom:10px; border-radius: 3px; webkit-border-radius: 3px; -moz-border-radius: 3px; }
.btn-plate:hover{ opacity:0.5; }
.btn-plate a{ color: #fff; text-align:left; font-size: 16px; line-height: 22px; text-decoration:none; display:block; position:relative; padding-left:16px; padding-right:30px;}
.btn-plate a:hover{ color:#fff; }
.btn-plate span{ font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:10px; }

/* 中抜き三角ボタン */
.btn-circlearrow a:before, .btn-circlearrow a:after{ display: block; content: ""; position: absolute; top: 50%; left:100%; }
.btn-circlearrow a:before{  width: 16px; height: 16px; margin-top: -8px; margin-left:-25px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background-color:#fff; }
.btn-circlearrow a:after{  width:0; height:0; margin-top:-4px; margin-left:-19px; border-left: 5px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid transparent; }

/* 別ウィンドウボタン */
.btn-blankwin a:before { display: block; content: ""; position: absolute; top: 50%; left: 100%; width: 15px; height: 12px; margin-top: -6px; margin-left:-25px; background: url(/images/common/icn-blankwin.png) no-repeat; }



/* 標準的なエスファ専用の文体フォーマット */
h2.esfa{ font-size:21px; letter-spacing:1px; color:#04278d; margin-bottom:25px; margin-top:30px; border-left:#04278d 8px solid; padding-left:10px;}
h3.esfa{ color:#00a884; font-size:18px; margin-top:20px;}
h4.esfa{ color:#2aaecd; font-size:16px; margin-top:20px;}
/*p.esfa{ font-size:14px; margin-bottom:20px; letter-spacing:1px; }*/
p.esfa, ul.esfa{ font-size:14px; margin-top:14px; letter-spacing:1.5px; line-height:26px; padding-bottom:20px; }
p.script{ font-size:10px; color:#ACACAC; padding-bottom:20px;}


@media screen and (max-width: 767px) {
	h2.esfa{ margin-top:20px; font-size:18px; }
	h3.esfa{ font-size:16px; }
	h4.esfa{ font-size:14px; }
	p.esfa{ font-size:12px; letter-spacing:1px; line-height:22px; }
	h2.esfa br, h3.esfa br, h4.esfa br{ display:none; }/* 改行タグを削除 */
}

/* 標準的なテーブルフォーマット */
table.standard{ width:100%; border-collapse:separate; border-spacing:5px; font-size:14px; color:#666; }
table.standard th, table.standard td{ padding:10px; }
table.standard th{ background-color:#d0e3e6; }
table.standard td{ background-color:#eeeff0; }

/* 太いフレーム */
div.panel{ width:87.7%; border:#eeeff0 solid 5px; padding:5.5% 5.5%;/* 50px */ font-size:14px; margin-bottom:50px; }

/*
------------------

 for Responsible

------------------
*/

img.flex{ width:100%; height:auto;}

.forpc{ display:inherit; } .forsp{	display:none; } /* visible */

.col-single{ margin:0 0 0 3.125%; width:93.75%; } /* 1 column */

.col-left, .col-right{ float:left; width:45.31%; margin:0 0 0 3.125%; } /* 2 column */

.col3-left, .col3-center, .col3-right{ float:left; margin-left:3.125%; width:29.16%; } /* 3 column */

@media screen and (max-width: 767px) {

.forpc{ display:none; }	 .forsp{ display:inherit; }  /* visible */

.col-single{  } /* 1 column */

.col-left, .col-right{ float:none; width:93.75%; margin:0 0 0 3.125%; } .col-right{ margin-top:50px!important; } /* 2 column */

.col3-left, .col3-center, .col3-right{ float:none; width:93.75%; margin-left:3.125%; }  .col3-center, .col3-right{ margin-top:50px!important; } /* 3 column */
}

/*
------------------

 basic

------------------
*/
html{
	overflow:auto;
	font-size:62.5%; /*10px*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:100%;
	height:100%;
}
body{
	background-color:#FFF;
	width:100%;
	height:100%;
	color:#4d4d4d;
}
a{
	color:#0071bb;
	text-decoration:none;
}
a:hover{
	color:#2aaecd;
	/* text-decoration:underline; */
}
div#wrapper{
	width:100%;
	height:auto;
	position:relative;
}
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
	opacity:0.5;
}
#page-top a {
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top:hover {
    opacity:1;
}


/*
------------------

 S P   M E N U [SP]

------------------
*/
div#spmenu{
	display:none;
}
/*
------------------

 H E A D E R

------------------
*/
div#header{
	width:100%;
	position:relative;
	height:600px;
}
div#header.top{
	margin: 96px 0 0;
}
div#header.top img#logo-esfa{
	width: 20.46%;
	max-width:262px;
	height: auto;
	margin: 0 0 0 4.45%;
	display: block;
	position: absolute;
	top: -40px;
	z-index: 999;
}

/*
------------------

 N A V

------------------
*/
div#nav-container{
	width:100%;
	height:112px;
	position:absolute;
	top:485px;
}
div#activeline{
	position:absolute; top:-6px; left:0px; height:68px; opacity:1;
	background-color:#fbed21;
	height:6px; /* default */
	width:100px; /* default */
	z-index:100;
	opacity:0;
}
div#nav-main{ /* Main navigation */
	width:100%;
	/* height:68px;*/
	background:#6ab552 url(../images/common/nav-main-bg.jpg) center repeat-x;

}
div#mainnav-cont{
	max-width:980px;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
img#mainnav-rect{ width:100%; height:auto; vertical-align: bottom; }
div#nav-main ul{
	/* max-width:980px;
	width:100%;
	margin:0 auto;
	left:50%;
	margin-left:-490px;
	*/
	max-width:980px;
	width:100%;
	position:absolute;
	z-index:200;
	height:66px;
	overflow:hidden;
}
li.navbtn{
	float:left;
	margin-left:1.1%;
}
li.navbtn img{
	vertical-align: bottom;
}
li#navbtn0{ margin-left:0 !important; }
li.navbtn img{
	/* height:68px; */
	width:100%;
	height:auto;
}
/* 72,144,162,176,203 */
li#navbtn0 { width:7.2%; height:auto; }
li#navbtn1 { width:21%; height:auto; }
li#navbtn2 { width:21%; height:auto; }
li#navbtn3 { width:21%; height:auto; }
li#navbtn4 { width:21%; height:auto; }

div#nav-sub{ /* Sub navigation */
	max-width:960px;
	width:100%;
	height:26px;
	margin:7px auto;
}
div#nav-sub ul{ }
li.subbtn{
	float:left;
	margin-top:3px;
	margin-right:26px;
	height:28px;
	overflow:hidden;
}
li.subbtn img{
	height:57px;
	width:auto;
}
li.subbtn img:hover, li.subbtn img.on-active{
	margin-top:-29px;
}
img.btntomedical{
	float:right;
	width:23%; /* ★width:220px; */
	/* ★height:26px; */
	margin-right:3%;
}
div#nav-sub img.btntomedical{ margin-top:4px; }

div#nav-sub img.btntoag{ /* ★ */
 float:right;
 width:35%;
 margin-right:2%;
 margin-top:4px;
}

li#subbtn2{ display:none; }
/*
------------------

 C O N T E N T S

------------------
*/
div#container{
	max-width:960px;
	width:100%;
	margin:0 auto;
	padding-bottom:30px;
}
/*
------------------

 S E A R C H  U I

------------------
*/
div#search{
	max-width:220px;
	width:100%;
}
div#search input#SS_searchQuery{
	float:left;
	font-size:14px;
	padding:4px 6px;
	border:#555 1px solid;
	color:#e0e0e0;
	width:73%;
}
div#search input#SS_searchSubmit{
	float:right;
	border: 0px;
	max-width:38px;
	width:17%;
	height:32px;
	background:#555 url(/images/common/icn-search.png) no-repeat center;
}
/*
------------------

 S I T E  M A P

------------------
*/
div#sitemap{
	width:100%;
	background-color:#f1f1f1;
}
div#sitemap-header{
	width:100%;
	height:72px;
	border-bottom:#e5e5e5 thin solid;
}
div#sitemap-header-box{
	width:93.75%;
	max-width:960px;
	margin:0 auto;
}
img#logo-esfa-sitemap{
	width:262px;
	height:31px;
	margin-top:20px;
}
div#sitemap-header a img.btntomedical{
	margin-top:25px;
}
div#sitemap-contents{
	width:100%;
	border-top:#fff thin solid;
	/* height:290px; */
	border-bottom:#e5e5e5 thin solid;
}
div#sitemap-contents-box{
	width:93.75%;
	max-width:900px;
	margin:20px auto 0 auto;
	display:table;
}
div#sitemap-c1{
	float:left;
	max-width:260px;
	width:36%;
	margin-left:2.2%;
	display:table-cell;
}
div#sitemap-c2{
	float:left;
	width:32%;
	display:table-cell;
}
div#sitemap-c3{
	float:left;
	/* width:28%; */
	width:36%;
	padding-bottom:20px;
	display:table-cell;
}
div#sitemap-c1 h1{
	font-size:16px;
	padding-left:13px;
	position:relative;
}

.h1_sub{
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 13px;
}
.h1_sub-philosophy{
    color: #2aaecd;
    border-color: #2aaecd;
}
.h1_sub-whats{
    color: #88b917;
    border-color: #88b917;
}
.h1_sub-authorized{
    color: #04278d;
    border-color: #04278d;
}
.h1_sub-premium{
    color: #9a8a76;
    border-color: #9a8a76;
}


div#sitemap-c1 h1:before{
	display: block; content: ""; position: absolute; top: 50%; left:0;
	width:0; height:0; margin-top:-4px; border-left: 7px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid transparent;
}

div#sitemap-c1 ul{
	margin-bottom:20px;
}
div#sitemap-c1 ul li{
	font-size:14px;
	color:#989898;
	padding-left:30px;
	margin-bottom:5px;
}
h1#btn-philosophy{ color:#2aaecd; border-color:#2aaecd;}
h1#btn-whats{ color:#88b917; border-color:#88b917; }
h1#btn-premium{ color:#9a8a76; border-color:#9a8a76;}
h1#btn-authorized{ color:#04278d; border-color:#04278d;}

div#sitemap-c2 ul { margin-bottom:20px; }
div#sitemap-c2 ul li{ font-size:14px; margin-bottom:10px; padding-left:15px; padding-right:15px; position:relative; }/* ★padding-right:15px; */
div#sitemap-c2 ul li:before{
	display: block; content: ""; position: absolute; top: 50%; left:0;
	width:0; height:0; margin-top:-4px; border-left: 7px solid #0071bb; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid transparent;
}
div#sitemap-c3 h1{
	color:#88b917;
	font-size:16px;
}
img#sitemap-freedial{
	margin-top:10px;
	max-width:237px;
	width:100%; height: auto;
}
img#sitemap-phone{
	max-width:235px;
	width:100%; height:auto;
}
div#sitemap-c3 p{
	margin-top:5px;
	color:#989898;
	font-size:10px;
}
img#sitemap-btn-inquiry{
	margin-top:20px;
	max-width:240px;
	width:100%; height:auto;
}
@media screen and (max-width: 960px) {
	div#sitemap-c3{
	float:left;
	width:28%;
	}
}
/*
------------------

 F O O T E R

------------------
*/
div#footer{
	margin-top:10px;
	height:50px;
	font-size:12px;
	width:100%;
	text-align:center;
	line-height:22px;
	display:block;
}

div#footer div#aside{
 max-width:728px;
 margin:30px auto 25px;
 font-size:0;
 line-height:0;
}

div#footer div#aside img{
 width:100%;
}

div#footer div#ulwrap{ text-align:center; }
div#footer ul{ margin:0 auto; display:inline-block; padding:0; }
div#footer ul li{
	float:left;
	padding:0 12px;
}
div#footer ul a{ color:#989898; }
div#footer ul a:hover{ color:#2aaecd; }
div#footer img{
	clear:both;width:auto;
}


@media screen and (max-width: 767px) {


/*
------------------

 S P   M E N U [SP]

------------------
*/
div#spmenu{
	display:inherit;
	position:absolute;
	width:100%;
	z-index:9999;
}
div#spmenu-btn{
	position:absolute;
	left:100%;
	margin-left:-62px;
	z-index:101;
	height:60px;
	overflow:hidden;
}
div#spmenu-btn img{
	height:124px;
	width:62px;
}
div#spmenu-contents{
	position:absolute;
	width:100%;
	top:58px;
	z-index:100;
	background-color:#eeeff0;
}
div#spmenu-contents-cont{
	border-top:#cbcbcb solid 2px;
	border-bottom:#cbcbcb solid 2px;
}
div#spmenu-btns{
	width:98%;
	margin-top:20px;
	margin-left:1%;
	text-align: center;
}
ul#spmenu-btns-top, ul#spmenu-btns-bottom{ display: inline-block; width: 100%;
max-width: 600px; }
li.spmenu-btn{
	text-align: left;
	width:45.3%;
	margin-left:3.1%;
	margin-bottom:1.5%;
	max-width:290px;
	float:left;
}
li.spmenu-btn img{ margin-left:3%; }
li#spmenu-btn1, li#spmenu-btn2{ padding:55px 0 10px 0;}
li#spmenu-btn1 img{ height:30px;}
li#spmenu-btn2 img{ height:30px;}
li#spmenu-btn3,li#spmenu-btn4{ padding:20px 0; }
li#spmenu-btn3 img,li#spmenu-btn4 img{ height:30px;}
li#spmenu-btn1{
	background:url(/images/top/kvbg1.jpg) no-repeat center;
	border:#2aaecd thin solid;
	background-size:cover;
	padding: 45px 0 0px 0;
}
li#spmenu-btn2{
	background:url(/images/top/kvbg2.jpg) no-repeat center;
	border:#00a884 thin solid;
	background-size:cover;
	padding: 45px 0 0px 0;
}
li#spmenu-btn3{
	background:url(/images/top/kvbg3.jpg) no-repeat center;
	border:#04278d thin solid;
	background-size:cover;
	padding: 45px 0 0px 0;
}
li#spmenu-btn4{
	border:#988575 thin solid;
	background:url(/images/top/kvbg4.jpg) no-repeat center;
	background-size:cover;
	padding: 45px 0 0px 0;
}
div#spmenu-tomedical,div#spmenu-toag{/* ★add:div#spmenu-toag */
	width: 87.5%;
	max-width: 600px;
	text-align: left;
	margin: 10px auto 0 auto;
	clear:both;
	background-color:#31a2bc;
}
div#spmenu-tomedical a:after,div#spmenu-toag a:after{/* ★add:div#spmenu-toag */
	border-left: 5px solid #31a2bc;
}
div#spmenu-tomedical img,div#spmenu-toag img{/* ★add:div#spmenu-toag */
	height:18px;
	width:auto;
}

ul#spmenu-subbtns{
	margin:3% auto 0 auto;
	width:100%;
	max-width:600px;
}
ul#spmenu-subbtns li{
	padding:10px 0;
	width:93.75%;
	margin:0 auto;
	background-color:#fff;
	margin-top:3%;
}
ul#spmenu-subbtns li p{
	height:28px;
	overflow:hidden;
	text-align:center;
}
ul#spmenu-subbtns li p img{
	height:57px;
	width:auto;
}
ul#spmenu-others{
	width:100%;
	max-width:600px;
	margin: 3% auto 0 auto;
}
ul#spmenu-others li{
	padding:15px 0 10px 0;
	width:45.3%;
	margin:0 auto;
	background-color:#fff;
	margin-left:3.1%;
	float:left;
}
ul#spmenu-others li p{
	text-align:center;
}
ul#spmenu-others li p img{
	height:18px;
	width:auto;
}
ul#spmenu-footer{
	margin-top:3.1%;
	padding-bottom:3.1%;
}
ul#spmenu-footer a li{
	font-size:12px;
	text-align:center;
	color:#989898;
}

/*
------------------

 H E A D E R - [SP]

------------------
*/
div#header{
	width:100%;
	position:relative;
	height:60px;
}
div#header.top img#logo-esfa{
	width: 68.75%;
	max-width: 262px;
	height: auto;
	margin: 14px 0 0 10px;
	position: absolute;
	top: 0;
}

/*
------------------

 N A V - [SP]

------------------
*/
/*
------------------

 N A V

------------------
*/
div#nav-container{
	width:100%;
	height:6px;
	position:relative;
	top:0;
}
div#activeline{
	display:none;
}
div#nav-main{ /* Main navigation */
	width:100%;
	height:6px;
	background:#6ab552 url(../images/common/nav-main-bg.jpg) center repeat-x;
	background-size:cover;
	text-align:center;
	position:absolute;
	top:60px;
}
div#nav-main ul{
	display:none;
}
div#nav-sub{ /* Sub navigation */
	display:none;
}

/*
------------------

 C O N T E N T S - [SP]

------------------
*/
div#container{
	width:100%;
	margin:0 auto;
	padding-bottom:30px;
}
/*
------------------

 S E A R C H  U I - [SP]

------------------
*/
div#search{
	width:220px;
	clear:both;
	margin:0 auto;
}
div#search input#SS_searchQuery{
	float:left;
	font-size:14px;
	padding:4px 6px;
	border:#555 thin solid;
	color:#e0e0e0;
}
div#search input#SS_searchSubmit{
	float:right;
	width:38px;
	height:32px;
	background:#555 url(/images/common/icn-search.png) no-repeat center;
}
/*
------------------

 S I T E  M A P - [SP]

------------------
*/
div#sitemap{
	display:none;
}
/*
------------------

 F O O T E R - [SP]

------------------
*/
div#footer{
	margin-top:10px;
	height:auto;
	width:100%;
	text-align:center;
	line-height:22px;
}

div#footer div#aside{
 max-width:none;
 margin:0 20px 30px;
}

div#footer ul{
	padding:10px 0;
	display:table;
	margin:0 auto;
	width:100%;
	background-color:#eeeff0;
}
div#footer ul li{
	float:none;
	padding:0;
}
div#footer p{
	margin-top:10px;
	width:80%;
	margin-left:10%;
}
div#footer p img{ width:100%; max-width:461px; height:auto; }


@media print{
	#page-top{ display:none; }
}

