/**********************************************************************　藤本眼科　*******************************************************************************/

body { margin: 68px 0 0 0;} /* 白ふちのないデザイン */

header ul li.fobt,.sp {display: none;}

/**********************************************************************　大枠デザイン　*******************************************************************************/
/***** 　　　　　左右1366で縛るかどうか？ 　　　　　　*****/ 

@media screen and (min-width: 1366px) 
{

}

/**********************************************************************　デザイン　*******************************************************************************/

.id-box { padding-top: 50px; }
.bgph { background-size: 100% auto; background-position: center center }

.item01 { width: 50%; top: 0;right: 0.5% }
.item02 { top: 0;left: 7% }
.item03 { width: 30%;margin-left: 70% } .item03 img { width: 100%;height: auto; }

/**********************************************************************　画像サイズの調整　*******************************************************************************/
.phj.constellation img { width: 70%; height: auto ;padding: 15px 8.5% 15px 21.5%}


.p-wide-90p { width: 90%;margin-right: 10% }
.p-wide-80p { width: 80%;margin-right: 20% }
.p-wide-70p { width: 70%;margin-right: 30% }

/**********************************************************************　背景写真ボックス　*******************************************************************************/

#photobg { background-size: 100% auto; }
#body01 #photobg { background-size: auto 100%;background-position: 20% center; }

/**********************************************************************　タイポグラフィー　*******************************************************************************/

span.kaig {text-align: center;display: block;}

/**********************************************************************　フォントサイズ　*************************************************************************/

h1 ,.h1like { font-size: 1.6em;line-height: 1.2em }
h2 ,.h2like { font-size: 1.4em;line-height: 1.4em }
h3 ,.h3like { font-size: 1.3em;line-height: 1.4em }
h4 ,.h4like { font-size: 1.2em;line-height: 1.4em }

h2.markfhead, h3.markfhead, h4.markfhead { font-size: 1.3em;line-height: 1.4em }

.sitemap a { font-size: 0.8em;line-height: 1.5em }

header ul li a { font-size: 0.8em }
div.anch { font-size:0.8em }

/**********************************************************************　サイズの調整　*******************************************************************************/

/*.txt { margin-left: 7%; margin-right: 7% }*/
.lft { width: 48% }.rgt { width: 48% }
.lft .honbun { width: 95%;margin-right: 5% ;}
.phj.migix2 { width: 90%;margin-left: 10% }
.phj .honbun .Mirante01 { padding-bottom: 40px; }
.rgt .honbun { width: 95%;margin-left: 5%  }
.lft h4 {  }
.rgt h4 {  }

.rokuyon .lft { width: 58% }
.rokuyon .rgt { width: 38% }

.yonroku .rgt { width: 58% }
.yonroku .lft { width: 38% }


.nanasan .lft { width: 68% }
.nanasan .rgt { width: 28% }

.ph-copy.hlf { width: 40% }

/***********************************************************************　固定ヘッダー　******************************************************************************/

header { height: 70px ; }

header ul { position: absolute; top: 0;right: 0;width: 72%; }
header ul li { float: left; width: 19.7%; }

header ul li a {
	text-align: center;
	display: block;
	height: 45px;
	padding: 25px 0 0;
	margin-left: 0;
}


/************************* 　ロゴ　***************************/

.logol { top: 10px ; left: 10px ; height: 50px; } /*　天地サイズ固定　*/
.logom { top: 50px ; left: 50px ; width: 25%;margin-left: auto ; margin-right: auto; }

.logos{ width: 50%; }
.logos.nakatsu{ width: 65%; }
.logos img{ width: 100%;height: auto; }
.logof img { width:auto ;height: 40px; }

/********************************************************************　ナビゲーション　************************************************************************/

.hov a { transition-property: all;transition: 0.3s linear; }

/***********************　ナビゲーション　カレント　*************************/

body#body00 #fixed-top a.c00,
body#body01 #fixed-top a.c01,
body#body02 #fixed-top a.c02,
body#body03 #fixed-top a.c03,
body#body04 #fixed-top a.c04,
body#body05 #fixed-top a.c05
{background-color: #efefef;}

body#subpage01 .sitemap a.ft01,
body#subpage02 .sitemap a.ft02,
body#subpage03 .sitemap a.ft03,
body#subpage04 .sitemap a.ft04,
body#subpage05 .sitemap a.ft05
{background-color: #efefef;}


/***********************************************************************　フッター　******************************************************************************/


.footbox {  }

.sitemap { display: block;padding: 15px 0 0 33.333%; height:50px; }
.sitemap a { display: block;float: left; }

.sitemap a { width: 24.0%;height: 25px;padding: 10px 0 0 0;margin: 0 0.5%; }


/**************************************************************　トップページ用　スライドショー　******************************************************************/



/******************************************************************************* 　マルチ　 *********************************************************************************/

/**　　　　　左右２列　　　　　　　**/

.lft{float: left;width: 50%;}
.rgt{float: right;width: 50%;}

/**********************************************************************  商品一覧  *******************************************************************************/

.card.card02
{
width: 21.5%;
margin: 1% 1% ;
}

.card.card03 { width: 25.5%; margin: 1% 1% ;}

.card.card03 img ,.card.card04 img,
.card.card03 a img ,.card.card04 a img
{width: 100%;height: auto; padding-bottom: 0;}

.card.card04 { width: 48.0%; margin: 1% 2% 1% 0 ; }
.card.card04 a { min-height: 100px }

.card.card04 a img{ width: 100%;height: auto; padding-bottom: 0; }
.card.card04 span { width: 55%;float: left;margin-left: 2% ;text-align: left; }
.card.card04 span.cardp { width: 35%;float: left;padding-right: 2%; }


.card.card04 p{ width: 100%;height: auto; padding-bottom: 0; }
.card.card06 { width: 14.2%; margin: 1% 0.7% ; }

.dan4 .thmbph { width: 21.0%; margin-right: 4%;margin-bottom: 10px }
.dan4 .thmbph#thmb04 { margin-right: 0; }

/**********************************************************************  説明など *******************************************************************************/

@media screen and (max-width: 899px) 
{
.tray.card01 { width: 90%; }
.tray.card04 { width: 41.3%; margin: 1% 1% ; }

#nagare4 .step , #nagare5 .step { width: 95%; }
#nagare4 .step.step04 , #nagare5 .step.step05 { margin-bottom: 100px }
}

/******************　背景写真付　********************/
@media screen and (min-width: 900px) 
{
.tray.card01 { width: 88%; }
.tray.card04 { width: 41.3%; margin: 1% 1% ; }
.step { min-height: 150px; }

#nagare4 .step.step01 { background-image: url(../image03/thumb11.jpg); }
#nagare4 .step.step02 { margin-left: 10.5%; background-image: url(../image03/thumb12.jpg); }
#nagare4 .step.step03 { margin-left: 20.0%; background-image: url(../image03/thumb13.jpg); }
#nagare4 .step.step04 { margin-left: 30.5%; background-image: url(../image03/thumb14.jpg); }

#nagare5 .step.step01 { margin-left: 0%; background-image: url(../image02/thumb01.jpg); }
#nagare5 .step.step02 { margin-left: 12.5%; background-image: url(../image02/thumb02n.jpg); }
#nagare5 .step.step03 { margin-left: 25.0%; background-image: url(../image02/thumb03.jpg); }
#nagare5 .step.step04 { margin-left: 37.5%; background-image: url(../image02/thumb04.jpg); }
#nagare5 .step.step05 { margin-left: 50%; background-image: url(../image02/thumb05.jpg); }

#nagare4 .step.step01 { margin-left: 10.5%; background-image: url(../image03/thumb12.jpg); }
#nagare4 .step.step02 { margin-left: 20.0%; background-image: url(../image03/thumb13.jpg); }
#nagare4 .step.step03 { margin-left: 30.5%; background-image: url(../image03/thumb14.jpg); }
#nagare4 .step.step04 { margin-left: 30.5%; background-image: url(../image03/thumb15.jpg); }
#nagare4 .step { width: 55%;float: none;clear: both;padding-left: 22% }

#nagare4 .step { background-size: 25% auto; }
#nagare4 .step.yajirushigrade { background-image : none; }
#nagare4 .step.yajirushigrade img { padding-left: 50% }

#nagare3 .step.step01 { margin-left: 0%; background-image: url(../image03/thumb12.jpg); }
#nagare3 .step.step02 { margin-left: 10.5%; background-image: url(../image03/thumb04.jpg); }
#nagare3 .step.step03 { margin-left: 20.0%; background-image: url(../image03/thumb14.jpg); }
#nagare3 .step { width: 55%;float: none;clear: both;padding-left: 22% }
#nagare3 .step { background-size: 25% auto; }
#nagare3 .step.yajirushigrade { background-image : none; }
#nagare3 .step.yajirushigrade img { padding-right: 50% }

#body05 #nagare3 .step.step01 { background-image: url(../image03/thumb12.jpg); }
#body05 #nagare3 .step.step02 { background-image: url(../image03/thumb16.jpg); }
#body05 #nagare3 .step.step03 { background-image: url(../image03/thumb04.jpg); }
#body05 #nagare3 .step.step04 { margin-left: 30.5%; background-image: url(../image03/thumb14.jpg); }
#body05 #nagare3 .step.yajirushigrade { background-image : none; }
#body05 #nagare3 .step.yajirushigrade img { padding-right: 50% }

#nagare5 .step { width: 35%;float: none;clear: both;padding-left: 15% }
#nagare5 .step { background-size: 25% auto; }
#nagare5 .step.yajirushigrade { background-image : none; }
#nagare5 .step.yajirushigrade img { padding-right: 33% }

.step { background-image: url(../img/100.png);background-repeat: no-repeat; }

.tray img{ width: 100%;height: auto; padding-bottom: 0; }

}

/**********************************************************************  エフェクト  *******************************************************************************/

/**　　　　　左右２列　　　　　　　**//*@import url(effects.css);*//*　その他は　エフェクト参照*/

.zoom-b {  }
.zoom-box:last-child { padding-bottom: 5%; }
.zoom-box::after { content: ''; clear: both; display: block; }
.zoom-box div {
	position: relative;
	width: 47%;
	height: auto;
	padding: 0;
}

.zoom-box.mojisoto:last-child { padding-bottom: 2.0%; }

/**　　　　　左右３列　　　　　　　**/

.zoom-box.sandan div {width: 30%;}
.zoom-box div.zb-lft { float: left; }
.zoom-box div.zb-rgt { float: right; }
.zoom-box.sandan div.zb-lft.cntr { margin-left: 5% }

/**　　　　　左右４列　　　　　　　**/

.zoom-box.yodan div {width: 21%; margin-left: 5%}

.zoom-box div:first-child { margin-left: 0; }
.zoom-box div span {
	position: absolute;
	text-align: left;
	top: 8%;
	left: 5%;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 1;
}


.zoom-box figure:hover+a span {
	left: 8%;
	opacity: 1;
}


/* 1. 背景写真がズームインするボタン */

.hover01 figure img {
	width: 100%;
	height: auto;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.hover01 figure:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

/**********************************************************************  アンカー  *******************************************************************************/

div.anch { clear: both;float: none;display:block;height: 20px;padding: 50px 0 0 0 }
div.anch a { display:block;float: left ;padding: 10px 0 }
div.anch a.anch-up { display:block;float: right; }

ul.tblike.nidan li.thbox{ border-top: 1px solid #CCCCCC; }

.kazai { width: 16%; padding: 0 2% ;margin: 20px 0 }

p.codebtn,
.bribt a
{ width: 50%;height: 40px;padding: 10px 0 0 0;margin: 0 auto; }


/**********************************************************************　テーブルのようなリスト　*******************************************************************************/


ul.tblike.pref li.thbox{width: 20%;}
ul.tblike.pref li.tdbox{width: 10%;}
ul.tblike.pref li.thbox.brn{height: 50px;}
ul.tblike.pref li.tdbox{width: 79%;text-align: left;padding-left: 1%}
ul.tblike.pref li.tdbox.brn{width: 9%;text-align: left;padding-left: 1%;height: 50px}
ul.tblike.pref li.tdbox.add{width: 69%;text-align: left;padding-left: 1%}

ul.tblike.nidan li.tdbox{width: 50%;}

ul.tblike.nidan li.bono{border-bottom: 0px solid #ffffff;}
ul.tblike li.end{float: none;clear: left;border-bottom: 1px solid #CCCCCC;}

ul.tblike li.end.bono{float: none;clear: left;border-bottom: 0px solid #CCCCCC;}


/************************* info ***************************/

dl.toiawase dt ,dl.toiawase dd { float: left;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #CCCCCC;padding: 0 0 0 0;margin: 0 0 30px 0;height: 50px }
dl.toiawase dt.bikou ,dl.toiawase dd.bikou { height: 140px }
dl.toiawase dt.clear-box ,dl.toiawase dd.clear-box { float: none; clear: both ;width: 100%  }

dl.toiawase dt{ width: 25% }
dl.toiawase dd{ width: 74% }

dl.toiawase dd input.meru{ width: 60% !important; }
dl.toiawase dd input.nama{ width: 40% !important; }
dl.toiawase dd input.pos{ width: 30% !important; }
dl.toiawase dd input.add{ width: 80% !important; }
dl.toiawase dd textarea.you{ width: 90% !important; }
dl.toiawase dd textarea.you{ height: 100px !important; }


/**********************************************************************　サイズ調整　*******************************************************************************/

/*---------------------　パソコン用　---------------------*/

.w-wide { width: 80%;margin-left:10% }
.w-wide-fl { width: 85%;margin-left:10%;margin-right:5% }

.pt-ss { padding-top: 5px }.pb-ss { padding-bottom: 5px }
.pt-s { padding-top: 10px }.pb-s { padding-bottom: 10px }
.pt-m { padding-top: 20px }.pb-m { padding-bottom: 20px }
.pt-l { padding-top: 30px }.pb-l { padding-bottom: 30px }
.pt-ll { padding-top: 50px }.pb-ll { padding-bottom: 50px }

.mt-ss { margin-top: 5px }.mb-ss { margin-bottom: 5px }
.mt-s { margin-top: 10px }.mb-s { margin-bottom: 10px }
.mt-m { margin-top: 20px }.mb-m { margin-bottom: 20px }
.mt-l { margin-top: 30px }.mb-l { margin-bottom: 30px }
.mt-ll { margin-top: 50px }.mb-ll { margin-bottom: 50px }

.pr-s { padding-right: 10px }.pl-s { padding-left: 10px }
.pr-m { padding-right: 20px }.pl-m { padding-left: 20px }
.pr-l { padding-right: 30px }.pl-l { padding-left: 30px }
.pr-ll { padding-right: 40px }.pl-ll { padding-left: 40px }

.w-15p{ width: 15%;margin-left:42.5% }
.w-20p{ width: 20%;margin-left:40% }
.w-50p{ width: 50%;margin-left:25% }
.w-70p{ width: 70%;margin-left:15% }
.w-90p{ width: 90%;margin-left:5% }
.w-95p{ width: 95%;margin-left:2.5% ; }
.w-95np{ width: 95%; }
.w-100p{ width: 100%;margin-left:0% ; }

.w-dr{ width: 60%;margin-left:20% }

.lft-s {left: 5%}
.tp-s {top: 10%}
.calen { max-width: 800px ; margin: 0 auto }