@charset "UTF-8";
body {
    font-family:'メイリオ','Hiragino Kaku Gothic Pro',sans-serif
}
.contents{
    margin-left:10px;
    margin-right:10px;
}
.header,.footer{
    background-color:#5595ff;
    
}
.logoimg{
    height:60px;
    margin-left:15px;
}

.mail a{
    display:block;        
    color:#fff;
    text-decoration:none;    
}
.mail a:hover{
    color:#4ce2a8;
}

/* ヘッダーとメニューの隙間 */
.sectB-1{
    margin-top:1px;
}

/* headline */
.titleimg{
    width:90%;
    padding:10px;
   
    
}
.headline{
    margin-bottom:10px;
    padding:15px;
    background-color:rgba(244,255,133,0.7);
    border-radius:20px;
    text-shadow: 2px 2px 1px #fff,-2px -2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff;
} 
.headline h1{
    font-weight:bold;
    color:#5595ff;
    }
    
/* ご案内コーナー */
.sectE-1,sectE-2{
    padding-bottom:10px;
}

.here,.tel_num{
    text-align:center;    
    display:block;
    padding:5px;
    font-size:20px;
    font-weight:bold;
    
}


/* オーダーフィールド */
.conte_{
    background-color:#a4d1ff;
    display:block;
    height:210px;
    position:relative;
    
}
.conte_ img{
    width:98%;
    height:auto;
    
   padding-top:10px;
    padding-left:1%;
}
.conte_ h2{
    display:block;
     padding:5px;
    font-size:18px;
    text-align:center;    
    background-color:#5595ff;
    color:#fff;
}
.illust_{
    background-color:#9bf0a9;
    display:block;
    height:210px;
     position:relative;
    
}
.illust_ img{
    width:98%;
    height:auto;
    
    padding-top:10px;
    padding-left:1%;
}
.illust_ h2{
    display:block;
    padding:5px;
    font-size:18px;
    text-align:center;    
    background-color:#3ba84d;
    color:#fff;
}
/* スローガン */
.slogan{
    margin:10px 15px;
    font-size:14px;
    font-weight:normal;
        
}
/* サンプルを見る*/

.more{
    display:inline-block;       
    position:absolute;
    bottom:10px;
    right:0px;
    padding:5px 15px;
    background-color:#3077be;
    color:#fff;
}
.more i{
    margin-left:10px;
}

.conte_ a:hover,.illust_ a:hover{
    opacity:0.6;
}
 
/* オーダーボタン */
.order_btn a{
    display:block;
    width:12em;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
    text-align:center;
    
    border-radius:5px;
    box-shadow:1px 1px 3px #666;
    color:#fff;
    text-decoration:none;
    text-shadow:1px 1px 0 rgba(0,0,0,0.4);
    font-weight:bold;
    font-size:150%;
    background-color:#f36;
    
    background:-webkit-linear-gradient(
    top,
    #ffced7 0%,#f74657 40%,#f10013 51%,#fe2951 100%);
    
    background:linear-gradient(
    to bottom,
    #ffced7 0%,#f74657 40%,#f10013 51%,#fe2951 100%);
}
.order_btn a:hover{
    opacity:0.6;
}
.quick{
    border-bottom:2px dotted #5595ff;
}
.tel_num span{
    font-size:small;
    
}

/* お知らせ */
.sectG{
    margin-top:15px;
    margin-bottom:10px;
}
.sectG-1{
    padding-bottom:20px;
    width:100%;
}
.news{
    padding:20px;
    border:solid 5px #ddd;
}
.news h3{
    margin-top:0;
    margin-bottom:5px;
    font-size:18px;
    color:#666;
}
.news ul{
    margin:0;
    padding:0;
    list-style:none;
}
.news li a{
    display:block;
    padding:5px;
    border-bottom:dotted 2px #dddddd;
    color:#000;
    font-size:14px;
    text-decoration:none;
    
}
.news li a:hover{
    background-color:#faffc8;
}

.news time{
    float:left;
    width:60px;    
    color:#888888;
    font-weight:bold;
    
}
.news a:after{
    content:"";
    display:block;
    clear:both;
    
}
.news .oshirase{
    float:none;
    width:auto;
    margin-left:120px;
}
#attention{
    color:#ff0000;
}

/* リンク */
.link-title {	
    color:#555;
	  border-bottom:2px dotted #ddd;
    margin-bottom:10px;
    padding:5px;
    font-size:16px;
    font-weight:bold;
    
    
}


.link ul{
    margin:0;
    padding:0;
    list-style:none;
}
.link li a{
    display:block;
    margin-bottom:10px;
    padding:10px;
    border-radius:4px;
    color:#fff;
    font-size:14px;
    text-decoration:none;
}
.link li a:hover{
    opacity:0.7;
}

.link ul a img{   
    float:left;
    
    border:none;
    width:100px;
    height:auto;
    
}

.link a:after{
    content:"";
    display:block;
    clear:both;
    
}
.link .book{
   float:none;
    width:auto;
    margin-left:100px;
    padding-left:15px;
}
/* 自分 */
#link-fk{
    background-color:#e10000;
}
#link-dt{
    background-color:#0956f5;
}
/* 加藤眼科 */
#link-kt{
    background-color:#76bfd0;
}
/* eoo */
#link-eo{
    background-color:#cedde1;
}
/* 藤沢産業 */
#link-fj{
    background-color:#02007f;
}
/* K&FACTORY */
#link-kf{
    background-color:#4267b2;
}
/* Goose Tool */
#link-gt{
    background-color:#1f9ba3;
}

/* 関連情報 */
/* 
.follow ul{
    margin:0;
    padding:0;
    list-style:none;
}
.follow li a{
    display:block;
    margin-bottom:10px;
    padding:10px;
    border-radius:4px;
    color:#ffffff;
    font-size:14px;
    text-decoration:none;
}
.follow li a:hover{
    opacity:0.7;
}
.follow-tw{
    background-color:#63bafb;
}
.follow-fb{
    background-color:#5288f7;
}
.follow-gp{
    background-color:#f65d4a;
}
.follow i{
    margin-right:10px;
    font-size:24px;
    vertical-align:middle;
    
}
 */
 /* footerを底に固定 */
/*.footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:40px;
}*/

/* コピーライト */
.copy{
    padding:10px;
    font-size:14px;
    color:#fff
}
/* カウンタ非表示 */
#count{
    display:inline-block;
    text-indent:-9999px;
}

/* 上へ戻る */
.pagetop img{
    width:40px;
    height:auto;
}
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    
    text-align: center;
    
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
   
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
}

/* ########  幅599px以下のレイアウト  ####### */
@media (max-width:599px){

    .logoimg{
    height:50px;
    margin-left:10px;
    }
    .mail{    
    margin-left:55px;
    }


    .headline h1{
    font-size:18px}
    
    /* トグルボタン */
    #menubtn{
    padding:6px 12px;
    border: solid 2px #ffffff;
    border-radius:5px;
    background-color:#99bfff;
    position:absolute;
    top:18px;
    right:15px;
    cursor:pointer;    
    }
    #menubtn:hover{
    background-color:#4ce2a8;
    }
    #menubtn i{
    color:#ffffff;
    font-size:18px;
    }
    #menubtn span{
    display:inline-block;
    text-indent:-9999px;
    }
    
    
    #menu {
    display:none;
    }
    .menu ul{
    margin:0;
    padding:0;
    list-style:none;}
    
    .menu li a{
    display:block;
    padding:5px;
    border-bottom:dotted 2px #eee;
    color:#5595ff;
    font-size:14px;
    font-weight:bold;
    
    text-decoration:none}
    
    .menu li a:hover{
    background-color:#faffc8}



}
/* ########  幅600px以上のレイアウト  ####### */
@media (min-width:600px){

/* ヘッダー内を横に並べる */
    .header:after{
    content:"";
    display:block;
    clear:both    
    }
    .header-1{
    float:left;
    width:50%;
    }
    .header-2{
    float:right;
    width:auto;
    }
    .mail{
    margin-top:20px;
    margin-right:15px;
}
    
/* メニューボタンは非表示 */    
#menubtn{
    display:none;    
}
#menu{
    display:block !important;
    
}
/* 幅600px以上の時のメニュー */
.sectB{
    background-color:#99bfff;
}
.menu ul{
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
    
}
.menu li{
    float:left;    
    border-right:#fff 1px solid;
}
.menu li:first-child{
    border-left:#fff 1px solid;
}
.menu a{
    display:block;
    width:8em;
    padding:5px 0;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover{
    background-color:#4ce2a8;
}
.menu ul:after{
    content:"";
    display:block;
    clear:both;
    
}
.menu li{
    float:left;
    width:auto;
    
}

    
    
 /* 扉絵とheadlineを並べる */  
    .sectC:after{
    content:"";
    display:block;
    clear:both}      
    .sect4{
    float:left;
    width:65%  
   }
    .sect5{
    float:left;
    width:35%}
    
/* コンテとイラストを並べる */       
    .sectE:after{
    content:"";
    display:block;
    clear:both}    
    
    .sectE-1{
    float:left;
    width:49%;
    margin-right:2%;    
    
    }    
    .sectE-2{
    float:left;
    width:49%}
    

/* お知らせとSNSを並べる */   
    
    .sectG:after{
    content:"";
    display:block;
    clear:both}
    
    .sectG-1{
    float:left;
    /* width:60%; */
    padding-right:35px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    
    }
    
    .sectG-2{
    float:left;
    /* width:40%  */}
    
    
/*headlineを絵に重ねる*/    
 .sectC{
    position:relative;    
    }
.headline{
    width:40%;
    position:absolute;
    top:40%;
    right:10px;
    
    padding:15px;
    background-color:rgba(244,255,133,0.5);
    border-radius:20px;
    text-shadow: 2px 2px 1px #fff,-2px -2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff}
    
.headline h1{
    display:block;    
    float:right;
    font-size:16px;    
    }
.headline p{
    display:block;
    float:right;
    }


}
/* 600以上640未満 */
@media (min-width:600px) and (max-width:640px){
    .book{font-size:12px;}
}

/* 640以上719未満 */
@media (min-width:640px) and (max-width:719px){
    .headline h1{
    font-size:17px;}
}

/* ########  幅720px以上のレイアウト  ####### */
@media (min-width:720px){
     .headline h1{
    font-size:20px;}
    
}

/* ########  幅800px以上のレイアウト  ####### */
@media (min-width:800px){
    .sectA,.menu,.contents,.copy{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    }
}