@charset "utf-8";

/*top
-----------------------------------------------------------*/

#mainimg { margin: 0 auto 20px; text-align: center; height: 450px; }

#toppage { width:900px; margin:0 auto;}

#header { position: relative; clear: both; padding-top: 15px; }
#header #logo { display: inline; float: left; margin: 0 10px 10px 0; padding: 5px 0; width: 400px;}
#header #logo img { width: 100%;}
#h_tel { margin-top: 5px;}
#h_tel .tel { font-size: 24px; font-weight: bold; color: #041F3E; text-align: center; }


#navi * { box-sizing: border-box; }
#navi { width: 900px; margin: 0 auto; padding: 0 0 1px 0; z-index: 100; border-bottom: 2px solid #041F3E; }
#navi #menu { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2px;}
#navi #menu li { position: relative; width: 100%; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 2px;}
/* #menu li::before { position: absolute; content: ''; display: block; top: 50%; left: 0; width: 1px; height: 50%; transform: translateY(-50%); background-color: #ddd;}
#navi #menu li:last-child::after { position: absolute; content: ''; display: block; top: 50%; right: 0; width: 1px; height: 50%; transform: translateY(-50%); background-color: #ddd; }*/
#navi #menu li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 35px; background-image: #fff; text-decoration: none; font-weight: bold; color: #041F3E;}
#navi #menu li a svg { fill: #041F3E; }
#navi #menu li a:hover { background: #041F3E; color: #fff; border-radius: 3px;}
#navi #menu li a:hover svg { fill: #fff; }
  

#toppage .news { display:inline; float:left; width:510px; padding: 0;}

#topics { width:510px; margin:0 auto 20px; padding:0 0 10px; }
#topics .head { margin:0 auto 10px; }
#topics .btn_info{ padding:0 4px; text-align:right; }
#nProgram { padding:0 10px; }
#nProgram dl { margin:0 auto 10px; line-height:150%; }
#nProgram dl dt { margin:0 0 10px 0; }
#nProgram dl dt span { font-weight:bold; color: #041F3E; }
#nProgram dl dd{ margin:0 auto 10px; border-bottom:1px dotted #ccc;}
#nProgram dl dd.comment { margin:0 0 10px; padding:0 0 5px 80px; border-bottom:1px dotted #ccc; }

#toppage .company_info { display:inline; float:right; width:370px; }
#toppage .company_info .head { margin:0 auto 10px; }
#toppage .company_info .side_compnay { padding:0 5px;}
#toppage .company_info .side_compnay p{ font-size: 13px;}
#toppage .company_info .side_compnay p span { font-size: 16px;}
#toppage .company_info .side_compnay p.addr{ padding-bottom: 5px; }
#toppage .company_info .side_compnay h3{ font-size:14px; padding-bottom: 5px;}

.contents { border: #efefef solid 1px;}
#subtitle { margin: 0 0 10px; padding: 2px 10px; background: #041F3E;}
#subtitle h3{color:#fff;}
#subtitle h3 a{color:#fff;}
#subtitle h3 a:hover{color:#fc0;}


#footer { margin: 0 auto; padding: 10px 0;}
#footer .compnay_info { margin: 0 0 10px; padding: 0 0 5px; border-bottom: 1px solid #041F3E; }
#footer .compnay_info ul li { display: inline; float: left; margin: 0 10px 0 0;}
#footer .f_menu { margin: 0 auto; text-align: center;}
#footer .f_menu ul li { display: inline; margin: 0 5px 0 0;}
#footer .f_menu a { font-size: 14px; }
#footer .right { width: 40%; }
#f_menu { margin: 0 0 10px;}
#f_menu li {display: inline;}
#f_menu li img {vertical-align: bottom; }

/*news
-----------------------------------------------------------*/
.news { padding: 50px 50px;}
.news ul li { margin:0 auto 20px; padding: 0 20px 20px; border-bottom:1px dotted #041F3E;}
.news ul li dl dt { margin:0 0 10px 0; padding: 0 0 10px; border-bottom:1px dotted #ccc;}
.news ul li dl dt span { font-weight:bold; color: #041F3E; font-size: 20px; margin-left: 10px; }
.news ul li dl dd{ margin:0 auto 10px;}



/*phylosophy
-----------------------------------------------------------*/
.phylosophy { padding: 100px 50px; background: url(../images/phylosophy-bg.jpg)bottom; background-repeat: no-repeat;}
.phylosophy p {text-align: center; margin-bottom: 30px; font-size: 16px; font-family: serif;}

/*company
-----------------------------------------------------------*/
.company { padding: 50px 50px;}
.company .list { width: 100%; vertical-align: middle;}
.company .list dl { margin: 0 auto 10px; padding: 0 0 10px; border-bottom: 1px solid #ccc;}
.company .list dl dt { display: inline-block; width: 170px; font-weight: bold; vertical-align: middle; padding: 0 10px 0 10px;}
.company .list dl dd { display: inline-block; vertical-align: middle;}
.company .list dl dd a.map { font-size: 13px; background: #041F3E; padding: 1px 5px; border-radius: 2px; color: #fff;}
.company .list dl dd .name::before { content: "林 大喜";}

/*privacy
-----------------------------------------------------------*/
.privacy { padding: 50px 50px;}
.privacy p { margin-bottom: 50px;}
.privacy p.ttl { text-align: center; font-weight: bold; font-size: 120%;}
.privacy dl { margin-bottom: 30px;}
.privacy dl dt { padding-bottom: 10px; border-bottom: #999 1px dashed;}
.privacy dl dd { padding-top: 10px;}

/*privacy
-----------------------------------------------------------*/
.policy { padding: 50px 50px;}
.policy p { margin-bottom: 50px;}
.policy p.ttl { text-align: center; font-weight: bold; font-size: 120%;}
.policy dl { margin-bottom: 30px;}
.policy dl dt { padding-bottom: 10px; border-bottom: #999 1px dashed;}
.policy dl dd { padding-top: 10px;}

/*selling
-----------------------------------------------------------*/
.selling { padding: 50px 50px;}
.selling .txt p { margin-bottom: 20px; text-align: center;}

.selling .table { margin-bottom: 20px;}
.selling .table .ttl { border-bottom: #041F3E 1px dashed; font-weight: bold; color: #041F3E; margin-bottom: 20px; padding: 0 0 5px 2px;}
.selling .table .ttl p { border-left: solid 8px #041F3E; padding-left: 5px; line-height: 1.5;}
.selling .table dl { display: table; border-top: #041F3E 1px solid; border-left: #041F3E 1px solid; border-right: #041F3E 1px solid; width: 90%; margin: 0 auto;}
.selling .table dl:last-child {border-bottom: #041F3E 1px solid;}
.selling .table dl dt { display: table-cell; width: 20%; background: #041F3E; color: #fff; border: 1px solid #fff; text-align: center; vertical-align: middle; padding: 10px 0;}
.selling .table dl dd { display: table-cell; padding: 0 0 2px 10px; vertical-align: middle;}
.selling .table dl dd .txt {display: table-cell;width: 34.5%; vertical-align: middle;}
.selling .table dl dd .img {display: table-cell;width: 60%; vertical-align:middle;}


.selling .btn ul {display: table; margin: 0 auto;}
.selling .btn ul li {display: table-cell; padding-right: 20px;}
.selling .btn ul li:last-child {padding-right: 0;}

/*contact
-----------------------------------------------------------*/
.contact { padding: 50px 100px;}
.contact .contact-form { margin: 0 auto;}
.contact .contact-form .must { background-color: #041F3E!important; padding: 2px 4px!important; border: none!important; text-shadow: none!important; box-shadow: none!important; background-image: none!important; float: none!important; display: inline-block!important;}
.contact .contact-form dl {width: 100%; display: table;}
.contact .contact-form dl:last-child { border-bottom: solid 1px #CCC;}
.contact .contact-form dl dt { width: 40%; background: #efefef; text-align: center!important; display: table-cell; vertical-align: middle;}
.contact .contact-form dl dd { width: 59%; display: table-cell; padding: 10px;}