@charset "utf-8";


/* ---------------------------
 base
--------------------------- */
#contents #top { margin: 0 40px; padding: 10px 0; line-height: 1.6em; }
#contents .clm { margin: 0 20px; padding: 10px 0; line-height: 1.6em; }

#contents .ltxt { width: 90%; margin: 0 auto 5px auto; padding: 5px 0; text-align: left; }
#contents .ctxt { width: 90%; margin: 0 auto 5px auto; padding: 5px 0; text-align: center; }
#contents .rtxt { width: 90%; margin: 0 auto 5px auto; padding: 5px 0; text-align: right; }


/* clmAlbum ---------- */
.clmAlbum { 
 margin: 0 20px 20px 20px; padding: 0 0 15px 0;
 position: relative;
 line-height: 1.8em;
}

.clmAlbum dl.photo {
 width: 360px; float: left;
 border-right: dotted 1px #ccc;
}
.clmAlbum dl.photo dt { 
 margin: 0 20px 0 0;
 height: 25px;
 border-top: 1px solid #fff; background-image: url(/img/head/h3_album.gif); background-repeat: repeat;
 text-align: center; line-height: 2em; 
 font-size: 12px; font-weight: bold; color: #576a3e;
}
.clmAlbum dl.photo dt a { text-decoration: underline; color: #576a3e; }
.clmAlbum dl.photo dt a:hover { text-decoration:underline; color: #693; }
.clmAlbum dl.photo dd { margin: 0 0 10px 0; text-align: left; }
.clmAlbum dl.photo dd img {
 padding: 2px;
 border: 1px solid #ddd;
 box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);
}

.clmAlbum .clmR { width: 430px; float: right; text-align: left; }

.clmAlbum hr {
 clear: both; margin: 8px 0; width: 100%;
 border: none; border-top: 1px dotted #999;
}

/* clmAlbum even */
.clmAlbum.even dl.photo {
 float: right;
 border-left: dotted 1px #ccc; border-right: none;
}
.clmAlbum.even dl.photo dt { margin: 0 0 0 15px; }
.clmAlbum.even dl.photo dd { text-align: right; }
.clmAlbum.even .clmR { float: left; }

/* clmAlbum map */
.clmAlbum.map dl.photo { width: 386px; }
.clmAlbum.map .clmR { width: 404px; }

/* clmAlbum moie */
.clmAlbum .clmR dl.movie dt { 
 padding-left: 12px;
 background: url(/img/common/icon_list02.gif) no-repeat 0px 5px;
 font-weight: bold;
}
.clmAlbum .clmR dl.movie dd { padding-left: 12px; }
.clmAlbum .clmR dl.movie p.data { margin: 0 0 8px 0; line-height: 1.6; font-size: 12px; }


/* table ---------- */
.tb-base {
 margin: 10px 0 40px 0;
 width: 100%;
 border-collapse: collapse;
 border: double 4px #EAE0CB;
}
.tb-base th {
 padding: 10px;  background-color: #E7DCC4;
 background-image: url(/img/common/bg_table.gif); background-repeat: repeat; 
 border-bottom: solid 1px #BD9777; text-align: center; font-size: 90%;
 }
.tb-base td { 
  padding: 10px; border-bottom: solid 1px #BD9777;
  text-align: left; font-size: 90%;
 }

.tb-base em { color: #cc0033; font-weight: normal; font-style: normal; }

.tb-nobd { margin:10px auto; border-collapse: collapse; }
.tb-nobd th { padding: 3px; border: solid 0px #fff; text-align: center; }
.tb-nobd td { padding: 5px; border: solid 0px #fff; }


/* td-button ---------- */
td.td-button { padding: 10px 0; text-align: center; }
td.td-button input { margin: 3px; padding: 3px; background-color: #dae1d1; font-size: 12px;
 border: 1px solid #363636; border-right: 2px solid #363636; border-bottom: 2px solid #363636; }


/* list ---------- */
.clm dl {
 margin: 15px 0 5px 0;
 line-height: 1.4em;
}
.clm dt {
 padding-left: 12px;
 background: url(/img/common/icon_list02.gif) 0px 2px no-repeat;
 font-weight: bold;
}
.clm dd { margin-bottom: 5px; padding-left: 12px; }


/* album, gmap, movie ---------- */
body#album,
body#gmap,
body#movie {
 margin: 0; padding: 12px 0 0 0;
 text-align: center;
 overflow: hidden;
}
.txtClose {
 margin: 10px auto;
 text-align: center; font-size: 12px;
}

#albumBox { text-align: center; }
#albumBox img { margin: 0 auto; }
#gmapBox iframe { margin: 0 10px; border: none; }
#movieBox {
 width: 480px; height: 360px;
 margin: 0 auto;
 background: #000;
}


/* ---------------------------
 news.html
--------------------------- */
#news .tab { display: none; }
#news .tab.open { display: block; }

/* head */
#news #contents h3 { position: relative; }
#news #contents h3:after {
 display: block;
 content: "";
 width: 0; height: 0;
 position: absolute;
 right: 10px; top: 38%;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-top: 8px solid #5f3824;
}
#news #contents h3:hover:after { top: calc(38% + 1px); }
#news #contents h3.open:after {
 border-top: none;
 border-bottom: 8px solid #5f3824;
}
#news #contents .add + h3 { margin-top: 10px; }
#news #contents .add {
 margin-top: 20px;
 text-align: right;
}


/* logList ---------- */
ul.logList { margin: 5px 0; }
ul.logList.collect {
 height: 300px; max-height: 300px;
 overflow-x: hidden; overflow-y: scroll;
}
ul.logList.collect::-webkit-scrollbar { width: 12px; }
ul.logList.collect::-webkit-scrollbar-track { background: #f6f3e6; }
ul.logList.collect::-webkit-scrollbar-thumb { background: #dfd2b7; }
/*ul.logList.collect::-webkit-scrollbar-button:single-button { display: block; height: 10px; background: #f6f3e6; }
ul.logList.collect::-webkit-scrollbar-button:single-button:vertical:decrement { border: 6px solid  transparent; border-bottom: 6px solid #bba880; }
ul.logList.collect::-webkit-scrollbar-button:single-button:vertical:increment { border: 6px solid transparent; border-top: 6px solid #c7b389; }*/


ul.logList li {
 margin: 0 10px; padding: 20px 0;
 border-top: 1px dotted #ccc;
 text-align: left;
 list-style-type: none;
}
ul.logList li:first-child { padding-top: 0; border-top: none; }
ul.logList p {
 margin: 0; padding: 0;
 text-align: left; line-height: 1.4;
}
ul.logList p.tit { margin: 0 0 10px 0; }
ul.logList p.tit span {
 display: inline-block;
 width: calc(100% - 125px);
 text-align: left;
 font-size: 14px; font-weight: bold; color: #cc3366;
}
ul.logList p.tit span.day { width: 100px; color: #666; }

#newsList { min-height: 300px; }
#loading p {
 padding: 60px 0 0 0;
 text-align: center;
 font-size: 14px;
}


/* ---------------------------
 library.html
--------------------------- */
#libraryBox { 
 margin: 0; padding: 10px 0;
 text-align: center; line-height: 1.8em;
 overflow: hidden;
}
#libraryBox h3 { margin-bottom: 0; }
#libraryBox .clm dt span.add {
 margin-left: 10px;
 font-size: 12px; font-weight: normal;
}

#libraryBox .left { 
 clear: both; 
 float: left;
 width: calc(50% - 10px);
 text-align: center;
}
#libraryBox .right { 
 float: right; 
 width: calc(50% - 10px);
 text-align: center; 
}

/* libraryIcon */
ul.libIco { margin: 0 64px; }
ul.libIco li {
 margin: 0 0 10px 10px;
 width: 350px;
 float: left;
}


/* libMenuTo ---------- */
#libraryBox ul.libMenuTop {
 display: table; overflow: hidden;
 margin: 10px 0 15px 0; padding: 0;
 border: 3px double #e7dcc4;
}
#libraryBox ul.libMenuTop li { display: table-row; }

#libraryBox ul.libMenuTop span.num,
#main #libraryBox ul.libMenuTop h3,
#libraryBox ul.libMenuTop p.ico {
 display: table-cell;
 padding: 8px 10px;
 border-left: solid 1px #bd9777; border-top: solid 1px #bd9777;
 background: #efefef;
 text-align: left; vertical-align: middle;
 line-height: 1.3;
 font-size: 13px;
}
#libraryBox ul.libMenuTop span.num {
 width: 5%;
 border-left: none;
 text-align: center;
 font-weight: bold;
}
#main #libraryBox ul.libMenuTop h3 {
 margin: 0;
 width: calc(95% - 48px);
 background: #efefef;
 text-indent: 0;
}
#libraryBox ul.libMenuTop p.ico {
 width: 48px;
 padding: 8px 5px;
 background: #fff;
 text-align: center;
}
#libraryBox ul.libMenuTop p.ico img { width: 32px; }

#libraryBox ul.libMenuTop a { text-decoration: none; color: #333; }
#libraryBox ul.libMenuTop a:hover { text-decoration: underline; color: #666; }

#libraryBox p.route {
 margin: -5px 0 10px 0; padding: 0 0 0 13%;
 text-align: left;
 font-size: 13px;
}

/* head */
#libraryBox ul.libMenuTop .hd span.num,
#main #libraryBox ul.libMenuTop .hd h3,
#libraryBox ul.libMenuTop .hd p.ico {
 border-top: none;
 background: #efefef;
 text-align: center;
 font-weight: bold;
}
#libraryBox ul.libMenu li.hd span.num { border-left: none; }


/* libMenu ---------- */
#libraryBox ul.libMenu {
 display: table; overflow: hidden;
 box-sizing: border-box;
 margin: 10px 0 25px 0;
 border: 3px double #e7dcc4;
}
#libraryBox ul.libMenu li { display: table-row; }
#libraryBox ul.libMenu span.num,
#main #libraryBox ul.libMenu h3,
#libraryBox ul.libMenu div,
#libraryBox ul.libMenu p.sup {
 display: table-cell;
 padding: 5px;
 border-left: solid 1px #bd9777; border-top: solid 1px #bd9777;
 text-align: left; vertical-align: middle;
 line-height: 1.3;
 font-size: 13px;
}
#libraryBox ul.libMenu span.num {
 width: 2%;
 border-left: none;
 background: #e7dcc4;
 text-align: center;
 font-weight: bold;
}
#main #libraryBox ul.libMenu h3 {
 margin: 0;
 width: 33%;
 background: #e7dcc4 url(/img/common/back_table.gif) repeat left top;
 text-indent: 0;
 font-size: 14px;
}
#libraryBox ul.libMenu div { width: 50%; }
#libraryBox ul.libMenu p.sup { width: 15%; }

#libraryBox ul.libMenu a.link {
 padding: 0px 0px 0px 12px;
 background: url(/img/common/icon_tblink.gif) left 3px no-repeat; 
}

/* List */
#libraryBox ul.libMenu dl {
 margin: 0px 0px 0px 5px; padding: 5px 0px 0px 0px;
}
#libraryBox ul.libMenu dl dt { margin-bottom: 5px; font-weight: bold; }
#libraryBox ul.libMenu dl dd { line-height: 1.8; }
#libraryBox ul.libMenu dl dd a {
 padding: 0px 0px 0px 12px;
 background: url(/img/common/icon_tblink.gif) left 3px no-repeat; 
}

/* head */
#libraryBox ul.libMenu .hd span.num,
#main #libraryBox ul.libMenu .hd h3,
#libraryBox ul.libMenu .hd div,
#libraryBox ul.libMenu .hd p.sup {
 border-top: none;
 background: #e7dcc4;
 text-align: center;
 font-weight: bold;
}
#libraryBox ul.libMenu li.hd span.num { border-left: none; }


/* libNavi ---------- */
#libraryBox #libNavi { 
 overflow: hidden;
 margin: 0 60px;
 height: 32px;
 position: relative;
 border: 1px dotted #eae0cb; text-align: center;
 line-height: 1.4em;  font-size: 13px; color: #999;
}
#libraryBox #libNavi p { 
 margin: 0;
 width: 90px;
 position: absolute; top: 0px;
 line-height: 32px; text-align: center;
}
#libraryBox #libNavi p.prev { left: 0; }
#libraryBox #libNavi p.next { right: 0; }
#libraryBox #libNavi ul {
 width: 300px;
 margin: 0 auto;
 text-align: center;
}
#libraryBox #libNavi li { 
 display: inline; margin: 0px; padding: 0 8px 0 12px;
 border-right: 1px solid #acacac;
 
 line-height: 32px;
 font-weight: bold;
}


/* ---------------------------
 contact.html
--------------------------- */
#contact {
 font-family: "ＭＳ Ｐゴシック", "メイリオ", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, sans-serif!important;
 font-size: 16px!important; color: #565656!important;
}

/* contactBox */
#contactBox {
 text-align: center; line-height: 1.8em;
}
#contactBox p { margin: 5px auto; padding: 0; text-align: left; }
#contactBox p.topBack { text-align: right; }
#contactBox table { margin: 10px auto 5px auto; line-height: 1.8em; }
#contactBox table th, #contactBox table td { padding: 15px 8px 15px 12px; vertical-align: middle; font-size: 13px; }
#contactBox table th { width: 200px; }
#contactBox table td { background: #fff!important; }

#contactBox input, #contactBox textarea { 
 margin: 0 3px 0 0; padding: 5px;
 height: auto;
 border: 1px solid #666;
 letter-spacing: 0.1em; box-shadow: none;
 font-size: 13px;
}
#contactBox table input { width: 80%; }
#contactBox table textarea { width: 98%; }
#contactBox .alert-error { margin: 10px 0 0 0; }

/* checkSubmit */
#contactBox #checkSubmit {
 margin: 30px 0 20px 0;
 text-align: center;
}
#contactBox #checkSubmit input.btn,
#contactBox #checkSubmit input.reset { 
 margin: 0 5px;
 padding: 8px 10px;
 border: 1px solid #666; border-radius: 3px;
 font-size: 15px; color: #333;
 cursor: pointer;
}
#contactBox #checkSubmit input[type="submit"].btn { background: #dae1d1; text-shadow: none; }
#contactBox #checkSubmit input.btn:active, #contactBox #checkSubmit input.btn.active,
#contactBox #checkSubmit input.btn:hover, #contactBox #checkSubmit input.focus {
 background-color: #dae1d1;
 opacity: 0.7;
}
#contactBox p.formAdd {
 margin: 0 0 20px 2em;
 text-indent: -1em; line-height: 1.5; 
 font-size: 12px; color: #767676;
}

/* copy, topBack */
#contact #copy { text-align: right; font-size: 12px; }
#contact .topBack a { text-decoration:underline; color: #576a3e; }
#contact .topBack a:hover { text-decoration:underline; color: #693; }


/* ---------------------------
 sitemap.html
--------------------------- */
.about p { margin: 2px 10px 25px 10px; font-size: 85%; }
.about strong { margin: 0px 4px; }

/* about ---------- */
.about h4 { 
 margin: 20px 10px 0 10px;
 line-height: 2em;
 font-size: 13px; font-weight: bold; color: #666;
}

.about dl { margin: 0 10px 5px 10px;
 text-align: left; line-height: 1.4em; }
.about dt { padding: 15px 0 5px 0; font-size: 13px; font-weight: bold; }
.about dd { font-size: 12px; font-weight: normal; }

/* sitemapBox ---------- */
#sitemapBox { 
 margin: 0 0 45px 0;
 font-size: 90%;
}
#sitemapBox h2 {
 margin-bottom: 0;
 border-bottom: 1px dotted #ccc;
 background: none; box-shadow: none;
 font-size: 14px; color: #c93;
}

#sitemapBox dl dt,
#sitemapBox dl dd {
 display: inline-block;
 padding: 15px 0;
 line-height: 1.2;
 font-size: 90%;
}
#sitemapBox dl dt { 
 width: 220px; 
 font-weight: bold;
}
#sitemapBox dl dt a { 
 display: block;
 padding: 0 0 0 22px;
 background: no-repeat url(/img/common/arr_lt01.gif) left center;
 text-decoration: underline; color: #576a3e;
}
#sitemapBox dl dt a:hover { 
 background-image: url(/img/common/arr_lt02.gif);
 text-decoration: underline; color: #669933;
}
#sitemapBox dl dd { 
 width: calc(100% - 228px);
 border-bottom: 1px dotted #ddd;
}

#sitemapBox .menu dl dt { 
 padding: 10px 0 10px 18px;
 width: 100%;
 border-bottom: 1px dotted #ddd;
 color: #999;
}
#sitemapBox .menu dl dt a {
 display: inline-block;
 margin: 0px 4px; padding: 0;
 background: none;
}


/* ---------------------------
* error
--------------------------- */
#error { 
 width: 630px; margin: 65px auto; padding: 0; 
 border: 1px dotted #a895a2; background-color: #fff;
 line-height: 1.6em; text-align: center; font-size: small;
}
#error p { width: 580px; margin: 20px auto; padding: 0; text-align: left; }
#error img { margin: 10px auto; border: 0; text-align: center; }
#clignt { width: 600px; margin: 0 auto 5px; padding: 0; text-align: right; font-size: 12px; color: #f0bcb7; }

/* @media screen ---------- */
@media screen and (max-width: 650px) {
 #error img { width: 100%; }
 #error { width: auto; margin: 50px 15px; }
 #error p { width: auto; margin: 15px; }
 #clignt { width: auto; margin: 0 10px 5px 10px; }
}