@charset "utf-8"; /* ================================================================= License : e-TRUST Inc. File name : blog.css Style : reset & default 文字コード UTF-8N 改行コード LF Build 20180214 ================================================================= */ .blog .flex{ display: block; } /* ================================================================= Style : reset ================================================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; background:transparent; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{ overflow-y: scroll; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } input, textarea,select { margin: 0; padding: 0; font-family: sans-serif; } input[type="text"], input[type="password"], textarea, select { border-radius: 4px; } input[type="text"], input[type="password"], textarea { -webkit-appearance: none; } ol, ul{ list-style:none; } table{ border-collapse: collapse; border-spacing:0; table-layout: fixed; } table td,table th{ word-break: break-all; } caption, th{ text-align: left; } a:focus { outline:none; } /* ================================================================= Style : default ================================================================= */ body { text-align: center; } img { max-width: 100%; height: auto; vertical-align:bottom; } .clearfix:after { content: "."; display: block; clear: both; height: 0; font-size: 0; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE Mac */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End Hack */ table {width:100%;} table th,table td { border: 1px solid #ccc; vertical-align: middle; } .map { margin-bottom: 20px; } .map ul, .map li { list-style-type: square; list-style-position: inside; } section table tr td article > h6, section ul li article > h5 { display: none; } /* ================================================================= Style : castam ================================================================= */ .blog{ text-align: left; max-width: 1200px; margin: 50px auto; } aside h3 { text-align: center; font-size: 14px; font-weight: normal; color: #fefefe; background-color: #ec661c; box-shadow: 0 1px 4px #ccc; border-radius: 4px; width: auto; margin: 0px 0 20px; padding: 8px 4%; clear: both; } aside ul li a { margin: 0 0 20px 0; padding: 20px 10px; background-color: #FFF; box-shadow: 0 1px 4px #ccc; border-radius: 4px; display: block; color: #333; transition:1s; } aside ul li a:hover{ background-color: #ececec; } aside ul li a .blogside{ display: block; padding: 5px; border-radius: 4px; } aside nav > a { display: block; border: 0; margin: 15px auto 0; padding: 6px; box-shadow: 0 1px 4px #ccc; border: 1px solid #ececec; background-color: #ec6612; box-sizing: border-box; color: #fff !important; text-shadow: none !important; border-radius: 4px; font-size: 12px; text-align: center; } aside div#search { position: relative; display: flex; -ms-align-items: center; align-items: center; margin: 30px 0 50px; } aside div#search form{ width: 100%; } aside div#search input { width: 100%; padding: 10px; } aside div#search button { position: absolute; top: 0; bottom: 0; right: 10px; border: none; background: url(../img/search.png) no-repeat; background-size: 22px; background-position: center center; text-indent: -9999px; } section div#contents article ul li a { display: block; padding: 3px 15px; color: #333; margin: 0 10px 20px 0; background: #ec6612; border-radius: 5px; color: #fff; } /* ================================================================= Style : default ================================================================= */ section div.wrap { display: flex; justify-content: space-between; } section aside { width: 25%; overflow: hidden; padding: 0 10px; } section div#contents { width: 70%; overflow: hidden; } aside div#prof a { display: block; width: 100%; height: 30px; text-align: right; padding-right: 10px; } section div#contents div.pager { line-height: 30px; padding: 0 10px 50px 10px; } section div#contents div.pager a.next { float: right; } section div#contents div#blog_detail { padding: 10px 10px 0 10px; } section div#contents div#prof_detail img { padding: 0 10px; float: right; } section div#contents div#prof_detail div#prof_text { clear: right; padding: 10px; } section div#contents article { padding: 0 10px 10px 10px; } section div#contents article div.date { line-height: 30px; color: #ec661c; margin-bottom: 10px; } section div#contents article h2 { font-size: 135%; height: auto; box-sizing: border-box; padding: 20px 35px; background: #e8ede6; margin-bottom: 50px; border-bottom: 5px solid #ec661c; } section div#contents article h2 span:nth-of-type(2) { display: block; font-size: 12px; } section div#contents article .detail{ border-top: 3px solid #ccc; padding-top: 20px; } section div#contents article ul li { float: left; list-style: none; } section div#contents article > p { } section div#contents > dl { display: block; margin: 0 10px 20px 10px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } section div#contents > dl dt { font-size: 18px; line-height: 30px; margin-bottom: 10px; } section div#contents > dl dt span { display: block; font-size: 14px; } section div#contents > dl ul li { float: left; list-style: none; } section div#contents > dl ul li a { display: block; line-height: 30px; margin-bottom: 20px; margin-right: 10px; } section div#contents > dl dt span:nth-of-type(2) { display: block; font-size: 12px; } #footer2{ text-align: center; } /* ================================================================= ver5 calendar ================================================================= */ div#form_calendar { width: 100%; max-width: 300px; margin: 10px auto 10px auto; } div#form_calendar div.head { position: relative; width: 100%; height: 30px; text-align: center; } div#form_calendar div.head span { position: absolute; display: block; line-height: 30px; font-size: 12px; font-weight: bold; color: #6b6b6b; } div#form_calendar div.head span:nth-of-type(1) { top: 0; left: 0; width: 20px; font-size: 20px; } div#form_calendar div.head span:nth-of-type(2) { top: 0; left: 25px } div#form_calendar div.head span:nth-of-type(3) { top: 0; left: 50%; transform: translateX(-50%); font-size: 14px; } div#form_calendar div.head span:nth-of-type(4) { top: 0; right: 25px } div#form_calendar div.head span:nth-of-type(5) { top: 0; right: 0; width: 20px; font-size: 20px; } div#form_calendar div.head span:nth-of-type(1):hover, div#form_calendar div.head span:nth-of-type(5):hover { color: #6f94f5; cursor: pointer; } div#form_calendar table { table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid #ccc; margin-bottom: 20px; width: 100%; } div#form_calendar table thead tr th { border: none; text-align: center; font-size: 11px; font-weight: normal; color: #6b6b6b; } div#form_calendar table tbody tr { height: 30px; } div#form_calendar table tbody tr td { border: none; border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; position: relative; } div#form_calendar table tbody tr td:first-of-type { border-left: 1px solid #ccc; background: #f1f1f1; } div#form_calendar table tbody tr td.other { background: #f9f9f9; } div#form_calendar table tbody tr td label { font-size: 12px; } div#form_calendar table tbody tr td:last-of-type label { color: #6f94f5; } div#form_calendar table tbody tr td:first-of-type label, div#form_calendar table tbody tr td.holiday label { color: #f17878; } div#form_calendar table tbody tr td.other label { font-size: 12px; color: #ccc; } div#form_calendar table tbody tr td.other:last-of-type label { color: #92adf3; } div#form_calendar table tbody tr td.other:first-of-type label, div#form_calendar table tbody tr td.other.holiday label { color: #f5acac; } div#form_calendar table tbody tr td.open:hover { background: rgba(0,255,137,0.2); } /* ================================================================= ver5 builingual ================================================================= */ div#builingual { background: #f1f1f1; padding: 5px 0; } div#builingual div.progress { display: none; float: left; line-height: 32px; color: #2e7200; font-weight: bold; } div#builingual div.progress img { float: left; margin-top: 4px; padding: 0 10px 0 20px; } div#builingual div.language { float: right; color: #999; font-weight: bold; } div#builingual div.language select { margin: 0 20px 0 10px; } div.translate { margin: 30px 0 30px 0; } section div#contents div#blog_detail + div.translate { margin: 10px 10px 30px 10px; } section div#contents article > p + div.translate { margin: 5px 0 30px 0; } /* ================================================================= スマホ CSS ================================================================= */ @media only screen and (max-width: 660px){ section div.wrap { flex-direction: column-reverse; } section aside { width: 98%; } section div#contents { width: 98%; } }