@charset "utf-8"; /* -----reset css------ */ html,body,address,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,div,p,pre,blockquote,hr,bdo,a,br,del,ins,abbr,dfn,sub,sup,q,cite,code,var,kbd,samp,map,area,iframe,img,form,label,fieldset,legend,input,textarea,select,option,optgroup,button,command,details,menu,summary,article,aside,header,footer,nav,section,figcaption,figure,main,mark,rp,rt,ruby,time,wbr,audio,canvas,embed,object,param,source,video,datalist,keygen,meter,output,progress{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;list-style-type:none;background:transparent;box-sizing:border-box;}embed,iframe,img,table,textarea{max-width:100%;}table{border-collapse:collapse;border-spacing:0;}a,a:link,a:visited{color:#333;text-decoration:none;}a:hover,a:active{color:#777;}article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;} /* ---reset css end----2020/10/19更新 */ html,body{ width:100%; min-height:100%; } html{ font-size:85%; /* フォントサイズは1em(16px)の85% */ overflow-x:hidden; } body{ font-size:1.0em; color:#000; /* 基本文字色 */ line-height: 1.8; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Verdana,sans-serif; word-wrap:break-word; overflow-wrap:break-word; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -webkit-overflow-scrolling:touch !important; animation:fadeIn 0.5s ease 0s 1 normal; } body::before{ /* ストライプの背景を他の画像にする場合は、ここから↓ */ background:-webkit-repeating-linear-gradient( left, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px); background: repeating-linear-gradient( 90deg, rgb(255,255,255), rgb(255,255,255) 3px, rgba(255,255,255,.5) 3px, rgba(255,255,255,.5) 6px); background-size:6px 2px; /* ↑ここまでを削除し、代わりに background-image:url(画像のURL);を入れる */ background-color:#a3957a; /* 背景色 */ background-position:center; background-repeat: repeat; position:fixed; display:block; top:0; left:0; width:100%; height:150%; content:""; z-index:-1; transform:translate3d(0,0,0); } @keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} } #wrapper{ width:100%; min-height:100%; text-align:center; position:relative; overflow:hidden; } body > #wrapper{ height:auto; } a, a:link, a:visited{ color:#005860; text-decoration:none; } a:hover{ color:#ff8c00; text-decoration:none; } img{ opacity: 1; animation:fadeIn 0.8s ease 0s 1 normal; vertical-align:bottom; border:none; max-width:100%; height:auto; } img[data-src] { opacity: 0; display:none; } .emoji{ margin:0; vertical-align:middle; } hr{ border-top:solid 1px #777; height:1px; margin:auto; } .hr1{ border-top:solid 1px #ddd; height:1px; padding-bottom:10px; margin:0 -15px; } .hr2{ border-top:dotted 1px #ccc; height:1px; } pre{ white-space:pre-wrap; word-wrap:break-word; font-size:1.0em; font-family:initial; } code{ font-family:Menlo,Consolas,monospace; font-size:1.0em; } blockquote{ padding:10px 15px; margin:10px; border:solid 1px #ccc; border-radius: 5px; } /* トップ画像 */ .topimg{ position:relative; overflow:hidden; padding-top:35.63%; /* 画像の高さpx÷画像の幅px×100で導いた数値% */ background:url('https://blog-imgs-144.fc2.com/s/o/r/sorauta1/gunsyu800.jpg'); /* 表示したい画像URL */ background-position:center center; /* 表示する位置 中央寄せ */ background-repeat:no-repeat; background-size:cover; } /* ヘッダー部分 */ header{ top:35px; left: 20px; right: 10px; position:absolute; text-align:left; background-color:rgba(255,255,255,0.4); z-index:1; } /* ブログタイトル */ header a, header a:link, header a:visited{ color:#504b40; /* ブログタイトルの文字色 */ font-size:2.0em; font-weight:normal; text-shadow:0 1px 1px rgba(0,0,0,.3); } h1{ top:0; padding:0 30px; line-height:1.5; } /* ブログ説明部分 */ .introduction{ padding:0 30px; color:#000; /* --説明文の文字色-- */ } /* 管理リンク・パンくず表示部分 */ .pan_box { min-height:1.2em; text-align:left; position:relative; z-index:2; } .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* 管理ページ部分 */ .adm{ text-align:right; padding:0 20px; position:relative; } .adm2{ display:none; /* メニューカラムの管理リンク、3,2カラム時非表示 */ } ul.admin{ margin:0; list-style-type:none; text-align:right; } ul.admin li{ display:inline; margin:0; } ul.admin li:before{ content:none; } /* メインカラム部分 */ .blog-con{ position:relative; margin:5px 0 35px; padding:25px 10px 20px; border:1px solid rgba(0,0,0,.3); box-shadow:0 5px 6px -3px rgba(0,0,0,.3); background-color:#fff; } .tape{ position:absolute; top:-5px; right:10px; margin-left:25px; background-color:#eef1ee; /* 日付部背景色 */ border:1px solid #d8ddd1; /* 日付部枠線色 */ box-shadow: 0 1px 3px rgba(0,0,0,.3); border-radius: 0 0 5px 5px; padding:0 1.0em; } .pen-link{ font-size:1.5em; color:#000; line-height:1; vertical-align:middle; transform:rotate(110deg); display:inline-block; } .com_col{ float:right; text-align:right; margin:-5px 10px 0 0; line-height:1.8em; color:#ccc; } .con_body{ margin:15px 25px 0; } .con_body ul li{ margin-left:20px; list-style-type:disc; } .con_body ol li{ margin-left:20px; list-style-type:decimal; } .relate_dd .relate_ul .relate_li, .relate_dd .relate_ul .relate_li_nolink { margin-left:0; list-style-type:none; /* 関連記事のリストマーク */ } .pd-plus{ padding:10px 0 25px; } .entry_footer{ padding:15px 10px 0; font-size:0.8em; text-align:right; } .topentry_comment_body{ padding:0 25px; } #tools_container{ margin-top:5px; } /* メニュー部分 */ .entry_title h2, .menu_title{ margin:10px 10px 5px; padding:0px 10px 2px; color:#005860; /* タイトル、メニューの文字色 */ font-weight:bold; line-height:1.5em; border-bottom:solid 2px #b9ab95; /* タイトル、メニュー下の青ボーダー */ position:relative; } .entry_title h2:after, .menu_title:after{ position:absolute; content:" "; display:block; border-bottom:solid 2px #ffc778; /* タイトル、メニュー下のオレンジボーダー */ bottom:-2px; width:30%; } .archive h2, .menu3 h2, h3.entry_title{ padding:0.15em 1.0em; color:#005860; /* タイトル、メニューの文字色 */ font-weight:bold; line-height:1.5em; } .entry_title h2 a{ font-size:1em; font-weight:bold; } /* プラグインリストマーク */ nav ul li, .menu3 ul li{ list-style-type:circle; margin-left:17px; } nav ul li ul li, .menu3 ul li ul li{ list-style-type:disc; color:#aaa; } li.sub_list,li.sub_list_end{ list-style:none; margin:0; color:#000; } /* リストマーク不要の場合はここまで削除 */ /* 3カラム+ベース部分 */ #box{ width:1150px; height:100%; margin:0 auto; text-align:left; background-color:#fff; } #content{ width:880px; float:left; padding:10px 10px 10px 20px; position:relative; } #inner-box{ margin-left:260px; } .title_list{ padding:15px 25px; } #left-box{ margin-left:-880px; } #left-box,#right-box{ float:left; width:270px; padding:0 10px 20px; position:relative; } .menu-box{ padding:10px 17px 50px; overflow:hidden; } .menu_block{ padding-top:25px; } #footer{ width:1150px; margin:0 auto; padding:20px 10px 10px; height:auto; color:#000; background-color:#fff; /* フッター背景色 */ text-align:center; line-height:1.5; } #btn1, #btn2{ display:none; /* ドロワーメニューボタン、3,2カラム時非表示 */ } .kiji1{ display:none; /* 記事表示時要約非表示 */ } .kiji2{ display:block; /* 要約表示時記事非表示 */ } /* 簡易表示トップページエントリー */ .kiji1{ overflow: hidden; margin:0; } .left{ float:left; width:35%; /* サムネイル画像の幅 */ height:auto; max-height:130px; margin-right:15px; text-align:center; position: relative; overflow:hidden; } .left img{ width:100%; height:auto; max-height:130px; -o-object-fit: cover; /* 古いopera用ベンダー */ font-family:'object-fit:cover;'; /* IE対策 */ object-fit:cover; border:1px solid #ccc; /* 枠線不要ならborder:none;に */ vertical-align:middle; } .mask{ position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(255,255,255,.5); -webkit-transition:.3s; transition:.3s; opacity:0; } .mask .caption{ color:#222; font-size:120%; font-weight:normal; position:absolute; top:50%; left:50%; width:100%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .left:hover .mask{ opacity:1; } .moji-c{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; /* 表示したい行数(3行表示で末尾に3点リーダー表示、webkit系のみ) */ max-height:5.4em; /* IE,Firefox対策(4行は7.2em、5行は9.0em)はみ出しはこの数値で調整 */ } p.right-txt{ text-align:right; margin-right:20px; } .clearLeft{ clear:left; } /* 記事ページ追記ボタン */ .hidden_box{ margin-top:1.5em; } .hidden_box label{ padding:0 10px; border:solid 1px #666; /* ボタン枠 */ cursor:pointer; } .hidden_box label:hover{ background:#eee; /* ホバー時ボタン背景色 */ color:#333; } .hidden_box input{ display:none; } .hidden_box .hidden_show{ height:0; padding:0; overflow:hidden; visibility:hidden; /* 中身を非表示にしておく */ } .hidden_box input:checked ~ .hidden_show{ padding:10px 0; height:auto; visibility:visible; /* クリックで中身表示 */ } /*コメントリスト*/ .sidehide{ display:none; margin-top:10px; text-align:left; border-top:1px dotted #ccc; } /*プロフィール画像の余白・表示位置 */ .plugin-myimage{ margin:0 auto; text-align:center !important; border:none; } /* 記事ページ移動 */ .page_navi{ padding:10px; text-align:center; margin:0px auto; } /* ページネーション */ #pagenavi{ line-height:30px; font-size:1.0em; text-align:center; } #pagenavi a,#pagenavi span{ margin:2px; padding:0 11px; background:#fff; border:1px solid #666; border-radius:3px; text-decoration:none; transition:all 0.3s; display:inline-block; } #pagenavi span{ font-weight:bold; background:#eef1ee; } #pagenavi a.dot{ text-decoration:none; border:1px solid #666; } #pagenavi a:hover{ border-color:#000; background:#ffe7c7; color:#000; font-weight:bold; } .pagenation{ overflow:hidden; padding:5px; } .pagenation ul{ text-align:center; position:relative; list-style:none; padding-left:0; } .pagenation li{ position:relative; display:inline-block; } .pagenation_prev,.pagenation_next{ margin:10px; font-size:1.0em; } /* ページトップ・ボトムボタン */ #pagetop{ bottom:180px; } #pagebottom{ bottom:135px; } #pagetop,#pagebottom{ display:none; position:fixed; right:30px; background-color:rgba(255,255,255,0.5); border:1px solid #999; text-align:center; color:#000; font-size:23px; text-decoration:none; padding:0 8px; border-radius:3px; z-index:4; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #pagetop:hover,#pagebottom:hover{ background-color:rgba(255,140,0,0.2); } /* カレンダー */ table.calender{ width: 100%; } .calender caption{ font-size:1.0em; border-bottom:1px solid #bbb; } .calender th{ font-weight:normal; text-align:center; border-bottom:1px solid #bbb; } .calender td{ text-align:center; border-bottom:1px dotted #ddd; } .calender td a:link,.calender td a:visited{ color:#a52a2a; text-shadow: 0px 0px 12px #f00; } .calender td a:hover{ color:#e747b3; text-decoration:none; } th#sun{ color:#da0b00; } th#sat{ color:#1e90ff; } /* 全記事表示 */ .all_body{ margin:10px 0; padding-bottom:7px; border-bottom:1px dotted #ccc; } .all_day{ padding:0; margin-left:7em; text-indent:-7em; } .all_boutou{ float:left; margin-left:7em; } .all_cate{ text-align:right; font-size:0.85em; } .all_cate a{ display:inline-block; } /* コメント部分 */ .com_block{ margin:0 0 20px; padding:10px 25px; border:1px dotted #005860; border-radius:7px; } .com_title{ margin:-35px 0 25px 40px; min-height:30px; color:#753a06; font-weight:bold; border-bottom:1px dotted #ccc; } .user-icon{ width:50px; height:50px; border-radius:50%; background-color:rgba(170,170,170,.2); margin-left:-15px; -o-object-fit:cover; /* 古いopera用ベンダー */ font-family:'object-fit:cover;'; /* IE対策 */ object-fit:cover; line-height:2.3; text-align:center; font-size:23px; color:rgba(150,150,150,.45); clear:both; } .author-icon{ width:50px; height:50px; background:#eee; border-radius:50%; position:absolute; left:21px; -o-object-fit:cover; /* 古いopera用ベンダー */ font-family:'object-fit:cover;'; /* IE対策 */ object-fit:cover; } .com_state{ margin-top:10px; text-align:right; } input[type=text], input[type=password], select, textarea{ font-size:1.0em; font-family:sans-serif; color:#000; border:1px solid #aaa; padding:2px; width:100%; margin-bottom:5px; } nav input[type=text], nav input[type=password], nav select, nav textarea{ width:100% !important; } input[type=submit], input[type=reset], input[type=button], input[type=image], button{ color:#000; border:1px solid #aaa; padding:2px 4px; } input[type=checkbox], input[type=radio]{ margin:5px; vertical-align:middle; } ::placeholder{ color:#c3c3c3; } @media only screen and (min-width:1000px) { /* 3,2カラム時入力フォーム2列 */ .form-left{ width:50%; text-align:left; padding-right:10px; float: left; } .form-right{ width:50%; text-align:left; padding:0 0 10px 10px; float: left; } } /* 2カラム */ @media only screen and (min-width:760px) and (max-width:1170px) { #box{ max-width:95%; } header { width:calc(100% - 290px); top:20px; left:20px; margin-right:0; padding-left:0; } #content{ width:100%; margin-right:-270px; margin-left:0; padding:10px 270px 0 20px; } #inner-box { margin-left:0; } #left-box{ float:left; margin-left:0; margin-top:0; padding:0 10px; } #right-box{ float:right; padding:0 10px 10px; } .menu-box{ padding:10px 17px 30px; overflow:hidden; } .pagenation{ margin-left:270px; padding-left:10px; } #footer{ width:95%; } .pagenation { margin-left:0; } } /* 1カラム */ @media only screen and (max-width:759px) { body::-webkit-scrollbar{ display:none; } body{ -ms-overflow-style:none; } #box { width:100%; min-height:90vh; } #content{ width:100%; float:none; margin:0; padding:0 15px; } #inner-box { margin-left:0; } header{ width:100%; top:0; left:0; overflow:hidden; height:auto; margin:0; padding:0; text-align:left; position:absolute; } h1{ padding-top:5px; line-height:1.3; } .adm{ display:none; /* 上部管理リンク、1カラム時非表示 */ } .adm2{ display:block; /* ドロワーメニュー下の管理リンク表示 */ margin:0 20px 50px; } #footer{ width:100%; } #left-box, #right-box{ float:none; width:100%; margin-left:0; } #left-box{ margin-top:0; padding:0 5px; } #right-box{ padding:0 5px 10px; } .menu-box{ padding:10px 17px 30px; overflow:hidden; } .menu_title{ cursor:pointer; } .menu_block { padding:0 0 5px; } /* ドロワーメニュー部分 */ #btn1, #btn2{ display:block; /* ドロワーメニューボタン表示 */ } #btn1{ overflow:hidden; height:27px; top:0; right:0; width:45px; position:absolute; } #btn2{ background-color:#f7ffff; } #nav_open { margin:0 13px; position:fixed !important; cursor:pointer; width:17px; height:26px; z-index:3; } #nav_open span, #nav_open span:before, #nav_open span:after{ position:absolute; bottom:18px; right:0; height:2px; /* ハンバーガーボタン 線の太さ */ width:17px; /* ハンバーガーボタン 線の長さ */ background:#333; display:block; content: ''; transform: translate3d(0,0,0); } #nav_open span:before{ bottom:-6px; } #nav_open span:after{ bottom:-12px; } #btn2{ overflow:hidden; top:0; width:270px; height:29px; z-index:3 !important; } #nav_close{ cursor:pointer; position:relative; padding-left:215px; } #nav_wrap{ display:none; } .css-cancel{ display:inline-block; position:relative; margin:3px 12px 0 20px; padding:0; width:2px; /* キャンセルボタン 線の太さ */ height:20px; /* キャンセルボタン 線の長さ */ background:#333; /* 線の色 */ transform:rotate(45deg); } .css-cancel:before{ display:block; content:""; position:absolute; top:50%; left:-9px; /* 左からの位置 */ width:20px; /* キャンセルボタン 線の長さ */ height:2px; /* キャンセルボタン 線の太さ */ margin-top:-1px; /* 上からの位置 */ background:#333; /* 線の色 */ } nav{ position:fixed; top:0; bottom:0; height:100vh; width:270px; right:-270px; padding-bottom:150px; background:#fff; border-left:1px solid #666; z-index:5; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } .tree-m{ display:none; /* メニューを閉じて表示 */ } /* ページトップ・ボトムボタン */ #pagetop{ bottom:150px; } #pagebottom{ bottom:110px; } #pagetop,#pagebottom{ right:10px; font-size:20px; } } @media only screen and (min-width:690px) and (max-width:760px) { /* 1カラム時入力フォーム2列 */ .form-left{ width:50%; text-align:left; padding-right:10px; float: left; } .form-right{ width:50%; text-align:left; padding:0 0 10px 10px; float: left; } } @media only screen and (max-width:600px) { header a, header a:link, header a:visited{ font-size:1.6em; } .introduction{ display:none; /* 600pxまで非表示 */ } .pan_box{ display:none; /* 1カラム時非表示 */ } .blog-con2{ margin:2.0em 0; } /* モバイル入力時フォントサイズ(これより小さいとiOSで画面が勝手に拡大される) */ input[type="password"],input[type="text"],textarea,select{ font-size:16px; font-family:sans-serif; } } @media only screen and (max-width:420px) { #content { padding:0 10px; } header{ width:100%; } header a, header a:link, header a:visited{ font-size:1.3em; } h1{ margin:5px 0; padding:0 35px 0 15px; } .title_list{ padding:5px 15px; } .con_body{ margin:15px; } .com_block{ padding:10px 15px; } .user-icon { margin: -8px 0 -8px -5px; } .com_title { margin: -30px 0 25px 50px; } .topentry_comment_body { padding:0 10px; } .kiji1{ display:block; /* 1カラム時要約表示 */ } .kiji2{ display:none; /* 1カラム時記事非表示 */ } .left{ float:none; width:100%; } .right { padding-top:10px; } .sidehide { padding:15px 0; } #footer{ width:100%; padding:10px 8px; font-size:0.9em; } /* ページネーション */ #pagenavi{ line-height:1.8; font-size:0.8em; } .pagenation{ padding-bottom:20px; } .pagenation_prev,.pagenation_next{ margin:5px; font-size:0.8em; } #pagetop{ bottom:180px; } #pagebottom{ bottom:150px; } #pagetop,#pagebottom{ right:10px; font-size:14px; padding:0 6px; } } /* その他、表示幅で変更 */ @media only screen and (max-width: 960px) { /* 動画サイズレスポンシブ用(iframeをdiv class="player"で括る) */ /* 960pxまでは埋め込みコード560×315で表示 */ .player{ position:relative; height:0; padding-bottom:56.25%; /* アスペクト比16:9の場合 */ overflow: hidden; } .player iframe{ position:absolute; width:100%; height:100%; top:0; left:0; } } @media screen and (min-width:600px) { .entry-navi{ display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } .entry-prev,.entry-next{ max-width:45%; } } .entry-navi{ margin:0 auto 20px; width:100%; font-size:12px; } .entry-prev{ list-style:none; margin:0 5px 0 15px; } .entry-next{ list-style:none; margin:0 15px 0 5px; } .entry-prev a{ padding:0 10px; display: block; position: relative; max-width: 100%; text-align: left; } .entry-prev a:before { display: block; content: ""; position: absolute; top: 50%; left: -3px; width: 10px; height: 10px; margin: -7px 0 0 0; border-top: solid 2px #666; border-right: solid 2px #666; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .entry-next a{ padding:0 10px; display: block; position: relative; max-width: 100%; text-align: right; } .entry-next a:after { display: block; content: ""; position: absolute; top: 50%; right: -3px; width: 10px; height: 10px; margin: -7px 0 0 0; border-top: solid 2px #666; border-right: solid 2px #666; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* 管理者コメントの背景に色を付ける 他のスタイル追加可能 記事のコメント投稿、管理画面コメント返信(ログイン時のみ) */ .author-comment{ background-color:#f8f8f4; } /* Newマーク、日付・タイトル後 */ .new{ margin-right:5px; font-size:0.9em; /* 文字サイズ */ font-weight:normal; color:red; /* 文字の色 */ } /* タグリスト */ .tag_list, .plugin-tag a{ word-break: break-all; display: inline-block; padding:0 5px; border-radius:3px; font-size:0.8em; } .tag_list{ margin:20px 25px 5px; border:1px solid #999; } .plugin-tag a{ margin-bottom:3px; border:1px solid #aaa; } @media only screen and (max-width: 420px) { .tag_list{margin:20px 15px 5px;} }