/* History
=================================== */

#history #container { background:url(../img/bg_history.jpg) fixed; background-size:cover; }
#history #pagebody { background-color:#fff; color:#333; }

#his-ind-list ul { display:flex; flex-wrap:wrap; }
#his-ind-list ul:after {content:"";clear:both;display:block;}
#his-ind-list ul li { float:left; width:32.666%; margin:0 1% 10px 0; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #his-ind-list ul li:hover { opacity:0.7; text-decoration:none; } }
#his-ind-list ul li:nth-child(3n) { margin:0 0 10px 0; }
#his-ind-list ul li a { display:block; padding:10px; box-sizing:border-box; width:100%; height:100%; background-color:#3d8c00; color:#fff; text-decoration:none; }
.h-l-tt { display:block; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; font-size:110%; }
.h-l-tt:after { content:""; display:block; margin:10px 0; width:100%; height:115px; background-repeat:no-repeat; background-size:cover; }
#his-ind-list ul li:nth-child(1) .h-l-tt:after { background-image:url(../img/history/his_ind_list1.jpg); background-position:center 30%; }
#his-ind-list ul li:nth-child(2) .h-l-tt:after { background-image:url(../img/history/his_ind_list2.jpg); background-position:center 40%; }
#his-ind-list ul li:nth-child(3) .h-l-tt:after { background-image:url(../img/history/his_ind_list3.jpg); background-position:center 30%; }
#his-ind-list ul li:nth-child(4) .h-l-tt:after { background-image:url(../img/history/his_ind_list4.jpg); background-position:center 20%; }
#his-ind-list ul li:nth-child(5) .h-l-tt:after { background-image:url(../img/history/his_ind_list5.jpg); background-position:center 50%; }
#his-ind-list ul li:nth-child(6) .h-l-tt:after { background-image:url(../img/history/his_ind_list6.jpg); background-position:center 40%; }
.h-l-tx { display:block; margin-bottom:10px; font-size:80%; line-height:140%; }

#his-nav { margin-bottom:15px; }
#his-nav ul { /* for space */ font-size:0; }
#his-nav ul li { display:inline-block; vertical-align:middle; /* for space */ font-size:0.9rem; }
#his-nav ul li a { display:block; width:100%; padding:0.5em 0; box-sizing:border-box; border-right:#333 1px solid; background-color:#000; color:#fff; line-height:130%; font-family:ryo-gothic-plusn, sans-serif; text-align:center; text-decoration:none; }
#his-nav a:after { position:relative; top:0.25em; right:0.3em; float:right; content:""; vertical-align:middle; width:0.8em; height:0.8em; background:url(../img/arrow.png) center center no-repeat; background-size:contain; }
#his-nav-itm1 { width:12.9032258064516%; }
#his-nav-itm2 { width:19.3548387096774%; }
#his-nav-itm3 { width:19.3548387096774%; }
#his-nav-itm4 { width:13.9784946236559%; }
#his-nav-itm5 { width:23.6559139784946%; }
#his-nav-itm6 { width:10.752688172043%; }
.history1 #his-nav-itm1 a, #his-nav-itm1 a:hover,
.history2 #his-nav-itm2 a, #his-nav-itm2 a:hover,
.history3 #his-nav-itm3 a, #his-nav-itm3 a:hover,
.history4 #his-nav-itm4 a, #his-nav-itm4 a:hover,
.history5 #his-nav-itm5 a, #his-nav-itm5 a:hover,
.history6 #his-nav-itm6 a, #his-nav-itm6 a:hover { background-color:#4aab01; border-right:none; }

#his-ttl { margin-bottom:10px; font-size:130%; line-height:120%; color:#52a314; font-family:ryo-gothic-plusn, sans-serif; font-weight:500; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#history #pagebody { padding-top:0; }

#his-ind-list ul li { margin:0 1% 0.8vw 0; }
#his-ind-list ul li:nth-child(3n) { margin:0 0 0.8vw 0; }

#his-ttl { margin-bottom:10px; padding-bottom:5px; border-bottom:#ccc 1px solid; font-size:110%; line-height:120%; color:#52a314; }

#his-nav{ width:100%; margin-bottom:10px;}
#his-nav ul li { height:auto; width:100%; border-bottom:#333 1px solid; font-size:0.8rem; }
#his-nav ul li:nth-child(6) { border-bottom:none; }

}

@media all and (max-width: 600px) {

#his-ind-list ul li { width:49%; }
#his-ind-list ul li,
#his-ind-list ul li:nth-child(3n) { margin:0 2% 1.6vw 0; }
#his-ind-list ul li:nth-child(2n) { margin:0 0 1.6vw 0; }

}

@media all and (max-width: 400px) {

#his-ind-list ul { display:block; }
#his-ind-list ul li { width:100%; }
#his-ind-list ul li,
#his-ind-list ul li:nth-child(2n),
#his-ind-list ul li:nth-child(3n) { margin:0 0 1.6vw 0; }
#his-ind-list ul li a:after {content:"";clear:both;display:block;}

.h-l-tt { font-size:100%; margin-bottom:7px; }
.h-l-tt:after { display:none; }
.h-l-tt:before { content:""; display:block;float:left; margin:0 10px 0 0; width:100px; height:100px; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#his-ind-list ul li:nth-child(1) .h-l-tt:before { background-image:url(../img/history/his_ind_list1.jpg); }
#his-ind-list ul li:nth-child(2) .h-l-tt:before { background-image:url(../img/history/his_ind_list2.jpg); }
#his-ind-list ul li:nth-child(3) .h-l-tt:before { background-image:url(../img/history/his_ind_list3.jpg); }
#his-ind-list ul li:nth-child(4) .h-l-tt:before { background-image:url(../img/history/his_ind_list4.jpg); }
#his-ind-list ul li:nth-child(5) .h-l-tt:before { background-image:url(../img/history/his_ind_list5.jpg); }
#his-ind-list ul li:nth-child(6) .h-l-tt:before { background-image:url(../img/history/his_ind_list6.jpg); }

}


/* history1
----------------------------------- */

.history1 main table{ width:100%; color:#333; font-size:90%; }
.history1 main tr.thBg{ background-color:#52a314; vertical-align:middle;}
.history1 main td{ border-bottom:1px #4d4d4d solid; line-height:160%;}
.history1 main th{ height:32px; text-align:left; }
.history1 main td{ padding:6px 24px; text-align:left;}

.history1 .th_odm{ width:230px; height:32px; }
.history1 table .btn a{ display:block; width:152px; height:26px; margin:2px auto;}
.history1 table .btn a:hover{filter: alpha(opacity=60);-moz-opacity:0.60;opacity:0.60;}
.history1 tr:nth-child(even) td {background: #eee;border-right:1px #ccc solid;}
.history1 tr td{border-right:1px #ccc solid;}
.history1 tr td:first-child{ border-left:1px #ccc solid;}
.history1 th.bd{ border-right:1px #fff solid;color:#fff;}
.history1 table th.tLeft{ padding-left:24px;}

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

.history1 main table tr th:nth-child(4),
.history1 main table tr td:nth-child(4) { white-space:nowrap; }

.history1 main th,
.history1 main td{ font-size:95%; }
.history1 main th{ height:auto; padding:6px; background-image:none; }
.history1 table th.tLeft{ padding-left:6px;}
.history1 main td{ padding:6px; }

.h-tbl-s-n { display:none; }

}


/* history2,3
----------------------------------- */

#his2-p { float:right; margin:0 0 0 15px; width:220px; }
#his2-p1 { width:220px; height:180px; margin-bottom:15px; background:url(../img/history/history2_parts.jpg) 0 0 no-repeat; text-indent:-9999px; }
#his2-p2 { width:220px; height:330px; background:url(../img/history/history2_parts.jpg) 0 -180px no-repeat; text-indent:-9999px; }
#his2-t p { font-size:90%; line-height:180%; padding-bottom:1.0em; }

#his3-p { float:right; margin:0 0 0 15px; width:220px; }
#his3-p1 { width:220px; height:450px; background:url(../img/history/history3_parts.jpg) 0 0 no-repeat; text-indent:-9999px; }
#his3-t p { font-size:90%; line-height:180%; padding-bottom:1.0em; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#his2-p, #his3-p { display:none; }
#his2-t p, #his3-t p { font-size:80%; line-height:160%; }

}


/* history4
----------------------------------- */

#his4-name1, #his4-name2 { margin-bottom:5px; }
.his4-name-e { font-size:160%; line-height:120%; font-family:ryo-gothic-plusn, sans-serif; }
.his4-name-j { font-size:90%; line-height:120%; color:#409102; font-family:ryo-gothic-plusn, sans-serif; }
#his4-name2 { border-top:#666 1px dotted; padding-top:1.0em; }

.his4-t { font-size:90%; line-height:180%; padding-bottom:1.0em; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

.his4-name-e { font-size:130%; }
.his4-name-j { font-size:75%; }
.his4-t { font-size:80%; line-height:160%; }

}


/* history5
----------------------------------- */

.history5 main table{ width:100%; font-size:90%; line-height:140%; }
.history5 main tr:nth-child(odd) td, .history5 main tr:nth-child(odd) th {background:#eee;border-bottom:1px #4d4d4d solid; border-top:1px #4d4d4d solid; }
.history5 main tr:last-child td, .history5 main tr:last-child th { border-bottom:1px #4d4d4d solid; }
.history5 main tr th { padding:8px 10px; text-align:left; font-weight:normal;border-right:1px #ccc solid;}
.history5 main tr td{ text-align:center;}
.history5 main tr td.text{ text-align:left; padding:8px; border-left:1px #ccc solid;}
.history5 main tr td.number{ padding:8px; text-align:center; font-weight:bold; color:#1c9503;}
#his5-date { float:right; padding-bottom:10px; font-size:80%;}

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

.history5 main tr th, .history5 main tr td { display:block; width:100%; box-sizing:border-box; font-size:95%; }
.history5 main tr:nth-child(odd) td, .history5 main tr:nth-child(odd) th { border-bottom:0; border-top:0; }
.history5 main tr:last-child th { border-bottom:0 }
.history5 main tr:nth-child(odd) th, .history5 main tr th { padding:6px; text-align:center; font-weight:bold; background-color:#4aab01; color:#fff; border-right:0; }
.history5 main tr td.number{ padding:6px; background-color:#fff; border-left:1px #dcdddd solid; border-right:1px #dcdddd solid; border-bottom:1px #dcdddd solid; }
.history5 main tr td.text{ text-align:left; padding:6px; background-color:#fff; margin-bottom:10px; border-left:1px #dcdddd solid; border-right:1px #dcdddd solid; border-bottom:1px #dcdddd solid; }

}


/* history6
----------------------------------- */

.his6-box { margin-top:20px; }
.his6-box:after {content:"";clear:both;display:block;}
.his6-txt h2 { background:#46a201; color:#fff; padding:0.4em 0.6em; line-height:140%; margin-bottom:10px; }
.his6-txt p { font-size:90%; line-height:180%; padding-bottom:1.0em; }
#his6-itm1 .his6-txt,
#his6-itm6 .his6-txt { float:left; width:620px; }

.his6-p { float:right; width:300px; height:200px; background-size:cover; text-indent:-9999px; }
#his6-itm1 .his6-p { background-image:url(../img/history/history6_p1.jpg); }
#his6-itm6 .his6-p { background-image:url(../img/history/history6_p2.jpg); }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#his6-itm1 .his6-txt,
#his6-itm6 .his6-txt { float:none; width:auto; }
.his6-txt h2 { font-size:90%; }
.his6-txt p { font-size:80%; line-height:160%; }
.his6-p { float:none; margin:auto; }

}